13

I know this question has been asked to death but nothing through searching has worked for me.

You know the deal, I have a div element that I need to vertically align text in but nothing has worked (position:absolute;top:50%;margin-top:-x;display:table-cell;vertical-align:middle;etc., etc.)

Here is what I am working with (sorry for the inline CSS). Anyway, the I would use line-height but the text can be one or two lines. It should vertical align with the image which is always max-height of 30px (30x50).

 <div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
 <div style="float:left;width:55px;height:40px;">
 <a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a>
 </div>
 <div style="float:right;width:155px;font-size:0.7em;height:40px;">
 <a href="link">This is the text to vertically align</a>
 </div>
 </div>
Tom
  • 4,467
  • 17
  • 59
  • 91
  • Must you use inline `CSS`? Makes it a pain to answer... – Phil Jul 13 '11 at 13:50
  • No not at all, I plan on converting all this to reg CSS once I figure it out – Tom Jul 13 '11 at 14:00
  • Possible duplicate of [How do I vertically align text in a div?](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div) –  Jan 25 '19 at 17:46

6 Answers6

9

One other thing you can do. If it's only one line of text in the div you can use line-height

example

div {
    line-height:40px;
}
brenjt
  • 15,997
  • 13
  • 77
  • 118
8

The idea is from here and should work for all browsers.

<div style="margin: 0 0 10px 0; padding: 10px; border: 2px solid #606060; background-color: #2b2b2b;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;">
    <div style="float: left; width: 55px; height: 40px;">
        <a href="link">
            <img style="max-width: 50px; border: 1px solid #ffb92c;" src="image.jpg"
                alt="" /></a>
    </div>
    <div style="float: right; width: 155px; font-size: 0.7em; height: 40px; display: table; #position: relative; overflow: hidden;">
        <div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
            <div style="#position: relative; #top: -50%;">
                <a href="link">This is the text to vertically align</a>
            </div>
        </div>
    </div>
    <div style="clear: both"></div>
</div>
Yiğit Yener
  • 5,796
  • 1
  • 23
  • 26
  • Image and text both are not properly vertically aligned – Ahsan Rathod Jul 13 '11 at 14:15
  • @Tom It's because of the other margins or paddings of your html fragment. Anyway, if you have some dynamic sized div and want to align content vertically the link gives the only cross-browser solution present. Other solutions either works for static height or only for some browser and for some version greater than bla bla... – Yiğit Yener Jul 13 '11 at 16:55
  • @Yigit I actually got it to work. It wasn't the text that wasn't aligning correctly, it was the image. If I wrap the image in the same div tags as I do the text, it all lines up. – Tom Jul 13 '11 at 17:04
3

You need to do like this:

http://jsfiddle.net/rathoreahsan/5u9HY/

Use fixed height instead of padding in main div. and use line height for left & right Divs

Ahsan Rathod
  • 5,465
  • 2
  • 21
  • 25
2

Here is a clean version of the solution

<div style="background: yellow">
<div style="width: 155px; font-size: 0.7em; height: 40px; display: table; overflow: hidden;">
    <div style="display: table-cell; vertical-align: middle;">
        <div style="">
            <a href="link">This is the text to vertically align</a>
        </div>
    </div>
</div>
<div style="clear: both"></div>

http://jsfiddle.net/5y4Nb/

Yock
  • 110
  • 1
  • 6
0

Is you need to show only a few lines of a very long text, here is the Fiddle. Adjust height according as needed.

    .container-text {
    height:40px;
    width:180px;
    overflow-y:hidden;    
    display:table-cell;
    vertical-align:middle;
    text-align: center;
}
ihimv
  • 1,308
  • 12
  • 25
0

Seems like a common float issue which can be fixed with a clearfix or, like i did in the following code snippet, with a fixed height of the wrapper.

I also sat an line-height of the floating divs and made it a little wider.

Take a look at this:

 <div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;height:40px">  <div style="float:left;width:55px;height:40px;">  <a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a>  </div>  <div style="float:right;width:185px;font-size:0.7em;height:40px;line-height:40px">  <a href="link">This is the text to vertically align</a>  </div>  </div>

http://jsfiddle.net/YqxPZ/3/

Community
  • 1
  • 1
Mattias Alfborger
  • 848
  • 1
  • 7
  • 15