Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertically align text within div element

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>
like image 755
Tom Avatar asked Jul 13 '11 13:07

Tom


People also ask

How to vertically middle align text in a div element?

To vertically middle align text in a DIV element, we need to use height CSS property of the DIV element and line-height CSS property of the text that needs to be aligned. If we set both these properties to equal value the text will appear vertically middle aligned within the DIV element.

How to center align text within a Div using Flexbox?

The flexbox property can also be used to vertically center align the text within the div element. Use justify-content:center to align and align-items:center to the div element.

How do I Center a Div vertically in HTML?

Use justify-content:center to align and align-items:center to the div element. In addition to justify-content and align-items, we have used display: flex, height, width, and border property in the code. The transform property along with position can also align the div contents vertically centered.

How do I align a block vertically in HTML?

You can use the vertical-align property, which commonly applies to inline, inline-block, and table-cell elements. But it cannot be used to align block-level elements vertically. Earlier, it was used with the valign attribute, but now this attribute is deprecated. Instead, you can use vertical-align: middle.


1 Answers

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;
}
like image 86
brenjt Avatar answered Oct 20 '22 08:10

brenjt