How to vertically align an image inside a div
The only (and the best cross-browser) way as I know is to use an inline-block
helper with height: 100%
and vertical-align: middle
on both elements.
So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;}
.helper { display: inline-block; height: 100%; vertical-align: middle;}
img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px;}
<div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>
How can I vertically align elements in a div?
Wow, this problem is popular. It's based on a misunderstanding in the vertical-align
property. This excellent article explains it:
Understanding vertical-align
, or "How (Not) To Vertically Center Content" by Gavin Kistner.
“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.
In a nutshell (and to prevent link rot):
- Inline elements (and only inline elements) can be vertically aligned in their context via
vertical-align: middle
. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example - For block elements, vertical alignment is harder and strongly depends on the specific situation:
- If the inner element can have a fixed height, you can make its position
absolute
and specify itsheight
,margin-top
andtop
position. jsfiddle example - If the centered element consists of a single line and its parent height is fixed you can simply set the container’s
line-height
to fill its height. This method is quite versatile in my experience. jsfiddle example - … there are more such special cases.
- If the inner element can have a fixed height, you can make its position
Vertically align text within a div
Create a container for your text content, a span
perhaps.
#column-content { display: inline-block;}img { vertical-align: middle;}span { display: inline-block; vertical-align: middle;}
/* for visual purposes */#column-content { border: 1px solid red; position: relative;}
<div id="column-content">
<img src="http://i.imgur.com/WxW4B.png"> <span><strong>1234</strong> yet another text content that should be centered vertically</span></div>
HTML/CSS: Vertical aligning span with vertical-align and line-height
Everything you said is right but you simply forget something which is inheritance. The span element is having the same line-height defined on the div that's why bottom
has no effect in your case.
Reset the value to initial
and it will work.
<div style="line-height: 50px; border: 1px solid yellow"><span style="border: 1px solid red; vertical-align: bottom;line-height:initial;">Some text</span></div>
CSS: Vertical-align
Here is an another option using "Flex" property.
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
#parent {
border: 1px solid red;
display: flex;
align-items: center;
height: 100vh;
}
.child {
border: 1px solid blue;
flex-grow: 1;
}
Codepen demo link
Vertical-align not working as expected
I highly recommend reading this vertical-align article to gain in-depth understanding of the property.
CSS vertical align
To vertically-align text within a parent element, and bear in mind that an img
is an inline-element and so behaves similarly to text, you can simply set the line-height
to the height
of the parent element:
div {
height: 300px;
line-height: 300px;
}
JS Fiddle demo.
Vertically align text next to an image?
Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
<span style="">Works.</span>
</div>
Related Topics
Google Maps Height 100% of Div Parent
Is The Copyright Meta Tag Valid in HTML5
Insert HTML with Scripts That Should Run
Question Mark Characters Display Within Text. Why Is This
How to Use Bootstrap-Theme.CSS with Bootstrap 3
The Right Way of Setting <A Href=""> When It's a Local File
How to Align a Label to The "Bottom" of a Div in CSS
Difference Between HTML Link Media and CSS Media Queries
CSS Not Loading After Redirect with Htaccess Rewrite Rule
Vertically Align Div (No Tables)
How Should a <!Doctype> Section Look in Jsf? HTML5 or Xhtml
CSS 100% Height with Absolute Positioning Top 0 Bottom 0
How to Get Placeholder Text in Firefox and Other Browsers That Don't Support The HTML5 Tag Option