Vertical align img and text inside

Question

I can't get the img and text in the span to be vertically aligned:

  <p class="login-button">
                    <input type="submit" id="login-submit" value="Log On" /><img style="padding-left:20px;" id="loadingDiv" src="/Content/ib/images/ajax-loader.gif" />
                    <span id="error" style="color:red; padding-left:13px;">text </span>

                </p>

Any ideas? I tried:

.login-button{ vertical-align:middle; height:30px; line-height:30px;}
.login-button img{ vertical-align:middle;}

What do you mean "vertically aligned? Do you want them centered in a row or the baselines all lined up the same? What you have works now if you want them centered in a row. — Rob, Mar 07 '11 at 12:07

score 31 · Accepted Answer · edited Apr 19 '14 at 15:30

31

I set up a demo for your at: http://jsfiddle.net/audetwebdesign/dCAkx/

I simplified your CSS a tiny bit and added some background color and padding.

You need to apply the vertical-align property to all the inline elements that you want to align.

The vertical-align property is not inherited, so you need to apply it to all the relevant elements.

You can apply padding and margins to control the spacing between the text and the image.

You can experiment a bit by adjusting the line-height of the container p and also, try out other alignment values such as top, bottom, baseline.

This trick is worth mastering because it touches on a key concept of how the CSS box model works, and this pattern is very common, so a good trick to have in your CSS toolbox.

edited Apr 19 '14 at 15:30

cdaddr

1,330
10
9

answered Mar 07 '11 at 12:10

Marc Audet

46,011
11
63
83

thank you! I wasted hours tofind a solution for this because everyone in team used paddings to set it correctly. I didnt know i had to use middle for both image and text! Only solution that is cross compatible! – GorillaApe Jan 28 '12 at 22:22
After adding "min-height" to p, vertical-align is broken! – Augusto Apr 28 '16 at 11:32
@augusto Best thing to do is to post a question describing the problem, then someone can try to help you. – Marc Audet Apr 28 '16 at 12:52
@MarcAudet, not sure I get your point. We are discussing the http://jsfiddle.net/audetwebdesign/dCAkx/ demo, right? In my previous comment, I'm saying that demo is not working as expected. Why are you asking me to post for a new question? – Augusto Apr 29 '16 at 07:39
@augusto If you specify a value for either `height` or `min-height`, then the `p` element will take on a height that may be greater than the height of the inline elements contained within it. `vertical-align` adjust the vertical position of the inline with respect to each other, NOT with respect to the parent container (`p` in this case). – Marc Audet Apr 29 '16 at 13:05
Thanks a lot for your clarification, @MarcAudet. I love your approach in this last comment of yours. Congrats or being so nice! – Augusto Apr 29 '16 at 16:05

score 0 · Answer 2 · answered Mar 07 '11 at 11:53

0

display:table-cell;
vertical-align:middle;

answered Mar 07 '11 at 11:53

lawl0r

840
6
16

1

Suggesting the table-cell is a horrible idea and a hack at best and he already is using vertical-align:middle. – Rob Mar 07 '11 at 12:07
@Rob OP might already be using `vertical-align: middle`, but as long as the paragraph he’s applying it to is `display: block` (the default for `p` elements) this won’t have any effect. This is why `display: table-cell` is needed in this case. – Mathias Bynens Mar 07 '11 at 12:58
2

Changing the container `p` display from `block` to `table-cell` can work, but gives you less control for positioning individual inline elements with the container. The `table-cell` displayed element will probably behave as an inline element, and that could lead to other issues in the layout, and then you need to wrap it in a `div`, all and all, a bit more complicated than it has to be. – Marc Audet Mar 07 '11 at 13:12
i never said it was a good solution, but from my experience tables are the only thing where vertical align works correcty. If you know the size, you can of course just set a `padding-top` to (height/2-(elementsize/2)) – lawl0r Mar 07 '11 at 14:11

score 0 · Answer 3 · answered Mar 07 '11 at 12:30

0

Here's a quick example:

Demo

You can easily mod the values to your needs.

I just added a wrapper div around the image and the span called wrap

Then added this in the CSS:

.wrap{ 
    position:absolute; 
    top:50%; 
    height:240px; /* Make this whatever you want your height with */
    margin-top:-120px; /* Negative half of the height */
}

answered Mar 07 '11 at 12:30

Myles Gray

8,711
7
48
70

This approach is not very flexible or bulletproof since you need to specify a height and a margin-top. I prefer not to add extra mark-up and keep the semantics as simple as possible. – Marc Audet Mar 07 '11 at 13:16
@MarcAudet - The OP asked how to vertically centre an item, This of course could be done with JS too but I find the `vertical-align` property very buggy across multiple browsers, IE especially. Bulletproof = stable across multiple browsers, is mine? yes. My solution will work for all scenarios, centred on page, within divs etc, you can also make it `%` based to make it fully dynamic. – Myles Gray Mar 07 '11 at 13:21
@MylesGray In this application, I was thinking that the login panel would be placed in a sidebar, maybe as part of a template for a CMS, so I did not want to specify dimensions. Talking about bulletproof, consider what might happen if the viewer bumps up the text size using ctrl-+ and the text is bigger than expected? – Marc Audet Mar 07 '11 at 13:32
@MarcAudet Ctrl+'+' makes the page as a whole bigger, not the text? What browser is this in? – Myles Gray Mar 07 '11 at 13:34
@MylesGray In FF, you can zoom the text only, View>Zoom>Zoom Text Only, one of those accessibility features. – Marc Audet Mar 07 '11 at 13:40
@MarcAudet Ah right you are, never knew that existed! Surely if we enabled that MOST of the web would break, but still, point taken, your method is clearly the better for accessibility, mine for variety of situations in which it can be used. +1! – Myles Gray Mar 07 '11 at 13:42
@MylesGray I was about to say, your technique would be very handy for certain applications especially like image gallery panels, tooltips, help call outs and so on. It really depends on how the login panel will be used on the page and we don't know that from the OP. – Marc Audet Mar 07 '11 at 13:46
@MylesGray About the FF zoom feature, for people who really need it because they are more or less legally blind, the last thing they are too concerned about is a page layout breaking, they just want to be able to see the words. – Marc Audet Mar 07 '11 at 13:48
Haha, very true! But still, I'll have a look at your method (try do up some test cases just to have a fiddle with) Upvoted your answer ;) Cheers! – Myles Gray Mar 07 '11 at 13:50
@MylesGray Let me know how you get on with your test cases. Keep up the good work! – Marc Audet Mar 07 '11 at 13:53

score 0 · Answer 4 · answered Mar 07 '11 at 13:02

0

vertical-align: middle doesn’t work on elements with display: block. Make them display: inline if possible, or display: table-cell if not.

Also, http://mathiasbynens.be/demo/center-vertically-inside-float might help.

answered Mar 07 '11 at 13:02

Mathias Bynens

144,855
52
216
248

Vertical align img and text inside

4 Answers4

Linked