标签云

微信群

扫码加入我们

WeChat QR Code

Why won't vertical-align: middle work?And yet, vertical-align: top does work.<div> <img style="width:30px;height:30px"> <span style="vertical-align:middle">Doesn't work.</span></div>


Here's an interesting article: Understanding vertical-align

2019年05月24日17分36秒

Certainly can't step in and defend CSS from a language standpoint, but a lot of my frustration has been from the fact that only certain features work depending on the browser you're in.Even today, when the modern "browser wars" are more about who follows the standards the best, there are still caveats abound and really limits the feature list.

2019年05月24日17分36秒

Heresy: <td>img</td><td valign="middle">text</td>

2019年05月24日17分36秒

648+ people will think I am crazy but the accepted answer didn't work for me. However this did... <div><img style="width:30px;height:60px;vertical-align:middle"><span style="height:60px;vertical-align:middle">Works.</span> </div>

2019年05月24日17分36秒

Tested in IE 6 & 7.Works a treat.

2019年05月24日17分36秒

"Since it's all in one line, it's really the image you want aligned, not the text." -- No, the image is fine where it's at.We want the text aligned.Not the image.-- I get that this works (in some circumstances, ex: when you're not using "float:left" on the image...), but it's just bizarre and unintuitive that to physically move the text to the vertical middle you would have to apply an attribute to the image next to it instead.

2019年05月24日17分36秒

BrainSlug83It's certainly not bizarre but I can see how newcomers can be tripped up by this. By default an image will be placed on the text baseline. All you are doing is moving where the image is attached relative to the text.As for using float:left, you should be doing that either on the block that contains the image and text, or on the text itself.

2019年05月24日17分36秒

BrainSlugs83 Agreed that it can be seen as counter-intuitive. It takes a bit of a mental shift, because according to CSS, what you need to do is center the image to the text. Not the text to the image.

2019年05月24日17分36秒

It doesn't work if you increase the span font size. See my answer.

2019年05月24日17分36秒

The display:table and display:table-cell CSS selectors work great, except, of course, in IE7 and below. After tearing my hair out for several hours, I decided that I didn't really need to deal with anyone that still used IE7-.

2019年05月24日17分36秒

display:table has some limitations in various browsers (in IE11 max-height doesn't work if the element is inside a table cell), so in some edge cases it's not a good idea to align vertically using table cells.

2019年05月24日17分36秒

Let Internet Explorer REST IN PEACE

2019年05月24日17分36秒

This worked great for me in Firefox! ...but it doesn't seem to work in Chrome (using version 42)

2019年05月24日17分36秒

It works in the latest version of Chrome, 42.0.2311.90 m,with no problem.

2019年05月24日17分36秒

simplest way that works with different font sizes

2019年05月24日17分36秒

In order to center the text next to or between images (horizontally on the page), you need to also add justify-content: center; and for spacing (without using <br/> tags) you might also want to throw in a padding: 1em;. Great update for us modern browser devs.

2019年05月24日17分36秒

Thank you. For whatever reason, this is the only answer (out of this, and the ones above) that worked for me.

2019年05月24日17分36秒

Actually this answer really helped me out, despite of the mega-upvote of the accepted answer. Thanx!

2019年05月24日17分36秒

This really is an excellent answer.I always assumed that the slight-off-of-vertical-center problem really couldn't be solved without trickery.

2019年05月24日17分36秒

I agree, this answer was clean and easy, and worked. It also doesn't rely on inconsistently supported css3 etc.

2019年05月24日17分36秒

This works well with different font sizes.

2019年05月24日17分36秒

I noticed top works and bottom works but not middle. Basically the "middle" is not defined as halfway between the top and the bottom. It more means "when it's taller than text, stick out both ways equally." And here you don't need vertical-align:middle on the text at all, just the image.

2019年05月24日17分36秒

#1 method works superb! I had 2 divs - one has text - other - an image. And now they both vertically centered. And very easy. Tested in FF34.0.5 and IE8. Thanks indeed.

2019年05月24日17分36秒

The methods work fine if the image is bigger (in height) than the text. But if the image is smaller then all but the last one sadly fail

2019年05月24日17分36秒

The 3rd method works in all cases - thanks , was trying to figure it out for hours.

2019年05月24日17分36秒

Isn't this the same answer as the one that was given in 2009 and was accepted as correct back then?

2019年05月24日17分36秒

Yes...but with little change of "auto" to avoid hardcoding

2019年05月24日17分36秒

And yet, doing this in tables would be achieved with "vertical-align: center".CSS blows.

2019年05月24日17分36秒

I tried setting line-height to 30px and it still doesn't work.

2019年05月24日17分36秒

text-align and vertical-align (with the exception of its application on td elements for legacy purposes) are specifically meant for inline and inline-block elements (span, img, etc).

2019年05月24日17分36秒

Note that this doesn't work correctly if your content is spread over multiple lines.

2019年05月24日17分36秒

Here is exact solution. It works for multi-line texts, too... Aboves are not proper for multi lines.

2019年05月24日17分36秒

Doesn't help in situations where the image size is unknown or dynamic.

2019年05月24日17分36秒

There are many good reasons to use inline CSS.React: CSS in JS for example.

2019年05月24日17分36秒

And if the image height is dynamic?I'm screwed :(PS, just because documentation exists for CSS doesn't make it annoying or unintuitive.

2019年05月24日17分36秒

Do you mean unannoying and intuitive?You didn't specify if he image's height is dynamic at all in your question, so I assumed the fixed height was what you were going to stick with.

2019年05月25日17分36秒

I'm with sam on this one. I assumed that items ought to be centered with whatever the img height turned out to be. I think we could all stand to cool down a bit though.

1970年01月01日00分03秒