Why does padding and margin work on block img, but not on inline.
I am having a layout problem with my images in CSS. I want no pixels (no margin, no padding) between each image, and I want a row of 4 images.
The only way padding or margin (setting to 0) works is if I use display:block as part of the style for the image. As soon, as I use inline, there are several pixels between each image and the padding and margin is ignored.
Anyway that I can get my own paddings and margins in images that are inline?
So you want an image to display inline, but act as a block?
Have you tried display: inline-block;?
I've found wrapping all img to div as a really useful practice.
<div class="image">
<img src="/path/to/image.jpg">
</div>
It is userful for adding any additional actions with images.
For example, you want to crop all of them to fit 400x200 block. You just do:
<style>
.-crop {
overflow: hidden;
}
.-crop img {
min-width: inherit;
min-height: inherit;
}
.image {
width: 400px;
height: 200px;
min-width: 400px;
min-height: 200px;
}
</style>
<div class="image -crop">
<img src="/path/to/image1.jpg">
</div>
<div class="image -crop">
<img src="/path/to/image2.jpg">
</div>
When images are wrapped, it is easier to solve some tasks. You need to make images bigger on hover? They are wrapped, you change img size, but not div, so your layout is ok. You need images to slide up with 20px on click? Same strory. You want them to be in center of some 400x200 area? They are wrapped, add vertical-align and text-align to div.
Of course, in common cases just img is fine. But when suddenly you have to add some additional actions -- you need to wrap them. So i wrap them everytime even if there is no need at the moment. Just for future.
You could use display: block and float:left if you want to have more images in one row.
Related
I have the following html structure:
<div class="parent">
<img src="image.png" class="child"/>
</div>
<div class="container">Page goes here.</div>
And the following css:
.container, .parent{
position: relative;
}
.child{
display: block;
max-width: 100%;
height: auto;
position: fixed;
}
Because the image is fixed the parent's height is probably 0. Therefore the container is placed over the image. However I want to have the image fixed and the container to be placed after the image, while keeping it responsive.
Any help would be appreciated!
UPDATE: I'm trying to get the scrolling behavior shown in this JSFiddle, but to make the container always be at the bottom of the image, even if the screen width is (let's say) under 300px.
In your Fiddle, I was able to achieve the desired behavior by changing the .container property from
margin-top: 300px to margin-top:50%
You'll likely not see a change if you add a position class to the image. That's used on div tags. Try adding that class to a new div tag with which you surround your image.
Alternatively, you could add a display: block to your image, but that makes things more complicated.
I think this is what you're asking, but I'm still a bit confused.
In this fiddle I have a load of divs, an input and some images that are displayed inline. I want to shift the images down a bit so it looks nicely aligned, but when I apply padding or margin, it simply pushes down every element inside the container.
<div class="rs-paging">
<div class="rs-pageclick">
<img class="rs-selectfirst" src="http://findicons.com/files/icons/2296/fidelity/32/arrow_left.png" alt="" title="First Page">
</div>
.rs-pageclick img {
cursor:pointer;
display: inline-block;
margin-top: 15px;
}
http://jsfiddle.net/paull3876/qds8pnfx/2/
I've tried display:table/table-cell, no difference. I started without the images in container divs and that was just the same. vertical-align:top doesn't seem to help. And it ssems the same with padding or margin.
I don't really want to resort to position absolute/relative as I think there should be a way with simply setting padding. This is driving me nuts !
thanks
The elements are all set to display: inline-block;. When you give one of the elements a margin-top, you push the whole line down.
Are you trying to get the items to align vertically? If so, you could use vertical-align: middle; on the inline-block elements.
http://jsfiddle.net/nea4w6h3/1/
Using overflow:hidden and fixing height for divs seem to work and fit your requests (I added a div containing all the text ones) :
https://jsfiddle.net/qds8pnfx/5/
I have a simple DIV with a fixed height like and several images with individual heights inside (their height is equal or less the height of the outer DIV):
<div>
<img src="..">
<img src="..">
...
</div>
This markup is as-is and can not be changed. I need to display all images side by side and all images should be vertically aligned with the middle of the DIV (so the padding top and bottom is identical per-image).
How to do that without changing the markup? Various answers deal with a markup where the image is placed itself inside a DIV which is not the case here.
After re-reading your question, that the <div> is at least as high as the highest image, simply do this:
CSS
img {
vertical-align: middle;
}
Try it here: http://jsfiddle.net/AsD9q/
You can also prevent the div from breaking (when the viewport is to small) by setting an explicit width or using white-space: nowrap; on the container: http://jsfiddle.net/MvDZJ/ (using width) or http://jsfiddle.net/xMtBp/ (using white-space)
That's the outcome:
First answer, which works with every height of the div:
As you said nothing about container itself, I assume, that it's not wider than the viewport. Than you could simply do something like this:
HTML
<div>
<img src="http://lorempixel.com/200/100/">
<img src="http://lorempixel.com/200/80/">
<img src="http://lorempixel.com/200/120/">
<img src="http://lorempixel.com/200/60/">
</div>
CSS
div {
display: table-cell;
vertical-align: middle;
/* only added for demonstration */
height: 200px;
border: 1px solid red;
}
img {
vertical-align: middle;
}
This won't work in IE7 though, as it can't handle display: table-cell. You can try it here: http://jsfiddle.net/3vXXy/.
This can be done with jQuery, the problem is you have no explicit selectors to work with so it would affect every image in every div on the page.
First you need to set the images to the top of the div like this in the CSS:
div img{vertical-align:top;}
Then take each image in succession, get it's height and set it's top padding to half the difference between the height of the div and the height of the image.
$(document).ready(function(){
$("img").each(function(){
var margin= ($(this).parent().height() - $(this).height())/2;
$(this).css('margin-top',margin);
});
});
Again, not an ideal solution without good solid selectors, but it does work. http://jsfiddle.net/calder12/H4Wkw/
I'm working on creating an image gallery where an image is centered in the entire page. The horizontal part is of course easy, but the vertical part is giving trouble.
I'm familiar with using display: table-cell; and vertical-align: middle; (or using line-height, but am not having success when using them along with trying to get the element to fill the page.
<div id='contain'>
<img src='url' />
</div>
I can't set the line-height of #contain since the height of the container will vary based on the size of the window.
If I absolutely position #contain, applying vertical-align:middle no longer centers the image vertically, regardless of how I set the size of the box.
If I try to size #contain to fill the window without absolute positioning, width: 100% and height: 100% (or using min-width/min-height) do not fill the page. Again, I can't specify exact values since they'll vary.
I know I can always set the image to be the background of #contain (or use JavaScript to figure out the heights), but if there's a CSS/HTML way of solving this without tables I'd prefer to use that.
Try to wrap your img in an extra div and then use the following css:
#contain {
display: table;
width: 100%;
height: 100%;
}
#contain div {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id='contain'>
<div><img src='url' /></div>
</div>
I have links and a sprite image I want to render in one line centered vertically:
HTML:
Why Eminem is the best
<div class="sprite" id="pointer"></div>
by
<img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692">
Justin Meltzer
How would I get all of these elements on one line?
I'd do a jsfiddle but I don't have my sprite images at a public url
Set your div to display inline-block so that everything will stay on one line. Do you want the links to then be aligned with the center of the image?
http://jsfiddle.net/gUrc9/
div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }
UPDATE:
As pointed out in comments inline-block is not supported in IE6/7 unless the element it is applied to is naturally inline. So better solution would be to change div to span.
span.sprite { display: inline-block; }
Your going to need to set your pointer div to be displayed inline:
#pointer { display: inline;}
By default div tags are block-level elements. This will force them inline with the rest of the items.
I would start with one improvement. DIVs are displayed as block, so if u r using a sprite, u wud give it a width n height anyway, in that case go for SPAN.
Now wrap a div around them and give it a style:text-align: center;. Or you could also give this outer DIV a width. and do a margin: auto;.
You'd be better off using a <span> for the pointer - a <div> is for grouping related elements - which this doesn't. It will also sit on the same line automatically, becasue a span is an inline element.