Alright, so this is some of the css and html:
css:
div {
height:24px;
line-height:24px;
}
html:
<div><img src="image.png"/>Text</div>
Now what that should (I think) produce is a div that is 24 pixels high, and the text should be vertically center aligned in the div, after the image. P.S. the image is 24x24px. However, it throws off the line-height to be about 12px too much (reducing the line-height to 12px does not solve it). Changing the image to be 12x12px though works and puts the text in the right spot. if the image is completely removed, the text is in the right spot. I guess my question is why is that doing what it is, and if/how I can fix it.
Thanks, sharf.
Give vertical-align:middle to img
div > img
{
float:left;
vertical-align:middle;
}
Fiddle
Try adding vertical-align to the img and experimenting with that to get it they way you want.
The simplest (but not always the best) solution is
img { vertical-align: bottom; }
The image does not throw off line height; rather, it causes the height of the line box to become larger than line-height. The reason to this is that by default, an image is treated as if it were a letter, of the size specified by the image dimensions, sitting on text baseline. Thus, the image requires a height that is the height of the image itself plus the distance between text baseline and the bottom of the font.
In CSS terms, “sitting on text baseline” is caused by the default setting of vertical-align: baseline. You can override this in various ways, with different effects on the vertical placement, but beware that browsers have many bugs in the implementation of vertical-align, and the value of bottom is so simple that they probably get it right.
Related
I have images in a div while setting all margins and paddings to 0. I still get a little gap below the images inside the div. Why is the div larger than the images?
See this jsfiddle: http://jsfiddle.net/n6bz4tye/
Same effect in FF32 and Chrome 37.
I know, I can use negative margins/paddings to solve this, but I'd like to know, what's happening and why it behaves like that.
To get this clear: Take the letters A B C D. All straight , nothing goes over the bottom, nothing over the top. Now if you take the letter g y j, etc. You have some spacing on the bottom.
By standard all images are rendered as "vertical-align:baseline". And that is why there is this small room on the bottom. The images are positioned where the normal letters would go. On line with A B C D.
Take your fiddle and inside of the div "images" add after the last img "A and g". You will see that g will fill out all the space to the bottom.
An image is an inline element by default, like a letter and there is space below that line for the descenders that you find on letters and the default vertical alignment of an inline element (in your case the image) is baseline and you can adjust the vertical-align of the image to position it elsewhere.
You could remove the below space by set vertical-align: middle; to .images img
JSFiddle - DEMO
.images img {
width: 100px;
margin: 0px;
padding: 0px;
vertical-align: middle;
}
You could also reset this behavior globally by set vertical-align to img
img {
vertical-align: middle;
}
I am trying to put an image in a container but for some reason, there is always a small additional space at the end of the image: Here is a fiddle with tests: http://codepen.io/anon/pen/sikAm. If you look at the last one in the right bar, there is no white because the container hides the overflow. This made me think that the problem happens because of the image, not because of the container. So the container's size gets that white because the image "pushes" an additional space inside. However, the image's size is correct and it has no margin that can add this at the bottom, so I might be completely on the wrong track:
img {
border: 0;
width: auto;
max-width: 100%;
height: auto;
}
I don't know what to do about this. What can cause that whitespace? What am I missing?
The problem is that, by default, images are inline elements, and its vertical-align property defaults to baseline. This alignment produces some space below the element.
To fix it, you can use
display: block [Demo]. This way the element will no longer be inline-level, so vertical-align won't apply.
vertical-align: middle [Demo]. This fixes the alignment problem. Other values may also work.
imgs are displayed inline by default, which creates spaces automatically for next line of texts.
Instead set the display to block. It will make those spaces gone.
img {
display:block
}
I've built a simple example pen: http://codepen.io/rpkoller/pen/tcwFj. I have a large image going completely across the whole container width. My goal was to get a div containing a headline and text to overlay one half of the image (in the example I've covered it completely).
Problem is I've assigned an height of 100% to the overlay div which refers to the parent article element - now the overlay is slightly higher than the image.
Guess it is due to the context.
Is there an elegant way to solve and work around that issue?
I think that the following works:
img {
width:100%;
max-width: 100%;
height:auto; //!important;
vertical-align: top;
}
img is inline and has a small space below it due to line leading.
Adding vertical-align: top fixes it.
See demo at: http://codepen.io/anon/pen/rfCuz
These CSS properties center the image of any size within a container of any size:
display:table-cell;
text-align:center;
vertical-align:middle;
This is a perfect fluid image centering, however, table-cell property gives me unwanted white space on the bottom. How to avoid it? See this:
http://jsfiddle.net/8DeLQ/1/
If the container contains no text content, you could possibly add font-size: 0; to the container's style. I think the unwanted whitespace is related to text content.
When I have text beside an image and set them at the same point on the screen, why don't they align properly at the top of their containing div? The text appears to be a pixel or two lower than the image. Is it because of the hight of the text?
The site I am concerned with is below. I want the top of the head-shots to align with the top of the bios. Any ideas?
http://www.fiveholeforfood.com/the-team/
That's because of the line-height
The line- height is pushing it down a couple of px but if you want to keep that for ease of reading I'd give the paragraphs a -5px margin on the top
#content .single p {
line-height: 1.5em;
margin-bottom: 10px;
margin-top: -5px;
It rather seems to be font-related, perhaps the ascent line is pushing the font down.
If so, there's nothing that can be done about it except adjusting the margins & padding’s applied to your elements to move the text some pixels upwards. Changing fonts or maybe even font-sizes would ruin the effect though.