Vertically align text to bottom within div
19th February 2007
I was looking to solve this extremely common problem – when you need to vertical-align:top/middle/bottom something within the DIV element. So far not a single solution fits my exact case, but I collected different solutions here for convenient reference.
- vertical-align CSS property should be applied to the inline element within your DIV (which is a block element), and NOT to the DIV itself. For this to work, you may need to set line-height and font-size to the height of the enveloping DIV element:
- <div>
- <img src="/images/demoBoxH.gif" alt="" />
- </div>
- div{
- height:200px;
- width:200px;
- background:blue;
- text-align:center;
- line-height:200px;
- font-size:200px;
- }
- *>div{
- font-size:12px
- }
- img{
- vertical-align:middle
- }
- there is a different approach: for the element within your DIV, set display:absolute and bottom:0px (or top:0px) to vertically align to bottom or top, respectively. Note that this approach doesn’t let aligning to “middle”, and that it works best when only one block-level element is aligned – otherwise elements will overlap at the bottom/top of container DIV. Container DIV should be set to position:relative.
- another approach: we can set the container DIV to
- div {display:table-cell;vertical-align:middle}
because for table cells vertical-align property works as one might expect from common sense and the text-align property. Basically, by doing so we ask the browser to treat our DIV as a table-cell, where vertical-align works just perfectly. However, this approach appears not to work on most IE browsers (probably except for IE7 only, but I didn’t try, as I need IE6 support as well).
- one more table-cell-display-based solution by Nikola:
- .nav_next a {
- display: table-cell;
- width: 85px;
- text-align: center;
- padding-top: 60px;
- position: relative;
- top: 60px;
- margin-top: -60px;
- }
This time, display:table-cell is applied to the immediate text container (anchor in the example), and then padding-top is added to push text to the bottom. Should work in FF3 and IE6; in FF3, this solution worked in a test setup without the last 3 CSS attributes, but YMMV.
- vertical alignment can be simulated with margins, applied to the element(s) within the container DIV. This is a simple approach and I would recommend it, if the heights of the container and elements within it are known (otherwise, this method is of no help). Example application of this method: if you have a DIV container 200px high, and need to position some SPANed text within it; first, set SPAN to
- span {display:block; height:20px}
(or whatever height value fits your requirements), and then set margins to vertically align the SPAN. To align your SPAN to top, you would apply
- span {display:block; height:20px;margin-bottom:180px}
to your SPAN; to align to bottom –
- span {display:block; height:20px;margin-top:180px}
to align in the middle –
- span {display:block; height:20px;margin:90px 0px}
References:
(The problem I have involves vertically aligning two DIVs within a container DIV so that DIV1 is aligned to top, and DIV2 is aligned to bottom, and their content is aligned appropriately to top/bottom, and that it works in at least IE6, IE7, FF2. If anyone has a ready solution – please comment. When I find mine, I’ll add it to the list above.)
August 18th, 2008 at 13:50
try this one and be free to simplify it and publish on your site appropriate version as I’m in a hurry. Works in ff3 ie6. I didn’t tested other browsers.
.nav_next a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666;
text-decoration: none;
display: table-cell;
height: 16px;
width: 85px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #333333;
border-left-color: #333333;
position: relative;
text-align: center;
float: right;
vertical-align: bottom;
margin-top: -60px;
padding-top: 60px;
top: 60px;
}
August 18th, 2008 at 21:27
Nikola,
Thank you for the grant of rights for publishing.
If we remove everything unrelated to positioning (in FF3 only), we are left with the following CSS code:
{ “height” is omitted because of the margin/padding/top attributes of 60px, which renders height=16px irrelevant (at least in FF3); “width”, however, influences the display, so it is left in. “vertical align” also had no effect in FF3, and should have no effect in IE6, so I removed it. }
Let’s have a look at what is going on.
By applying display:table-cell, you make the anchor element behave like a table-cell. This, in turn, enforces proper width of the element, and makes all of margin/padding/top attributes exhibit desirable effects in FF3.
An equivalent, which works just the same in FF3, is to set display:block and add position:relative (which isn’t necessary for FF3 with display:table-cell).
Applying padding-top:60px pushes the anchor’s text to the bottom, and text-align:center centers text. Negative margin-top:-60px looks like elements flow fix (had no effect in my test file with only two elements; might also be IE6-specific).
So the minimal working version might be:
with the last three attributes unnecessary for FF3.
Let’s label this solution as “display:table-cell extended”
April 24th, 2009 at 12:48
Try this as it may do the trick. You can apply css styling as appropriate. Only apply colours, etc. to the DIV. Only tested and confirmed that is works on IE7 & FF3. Also solves another problem in that if your text size is increased the table does not overflow as it would if it were a table alone.
April 1st, 2010 at 14:03
the
div {display:table-cell;vertical-align:middle}trick often doesn’t work for some unknown reason
April 1st, 2010 at 15:04
Sky,
I believe some contexts and/or CSS attribute combinations make “table-cell” display type unusable; I might have seen something about it at the time of posting.
If you have a fragment of code where “table-cell” doesn’t work – please post it here.