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>
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.
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.
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.
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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With