CSS vertical-align text-bottom

Question

Hi there I m trying to position text to the bottom of the  lt div gt   Neither vertical-align text-bottom  or vertical-align bottom   The trouble is below it is my navigation buttons and if I push it down then they go out of alignment    Is there a way I can work around this with my CSS    a link  color  452809  a hover  text-decoration underline color  f00  a visited  color  3886e0   fleft  float left   fright  float right   clear  clear both     border 0 margin 0    body  font 12px Tahoma Arial Helvetica sans-serif color  666 background  3cb40d   main  margin 0 auto width 780px background  fff url images vitalbodyhealth gif  no-repeat center top   header  width 780px margin 10px  height 210px   logo  padding-right 10px text-align right padding-bottom 9px height 150px vertical-align text-bottom    logo a  text-decoration none text-transform lowercase font-style italic font-size 16px color  fff font-weight bold   logo H2 a  font-size 10px   buttons  padding-top 0px height 40px width 780px   buttons li  display inline   buttons a  display block float left width 80px height 26px text-align center text-decoration none color  fff font-weight bold font-size 14px padding-top 0px margin-left 12px   buttons a hover  width 80px height 36px text-decoration underline   content  width 720px margin 0 auto padding 20px     inner copy  border 0 color  f00 float right width 50  important margin -100  0 0 0 overflow hidden line-height 0 padding 0 font-size 11px   left  width 450px padding 10px  background  EFEFEF   left H1   left H2  color  3cb40d margin 0   left H1  font-size 24px padding 0   left H2  font-size 18px padding-top 10px   left a  color  3886e0   left a hover  text-decoration none color  f00   left a visited  color  3886e0   right  float right width 240px  background  EFEFEF   sidebar  width 240px background  EFEFEF   sidebar ul  margin 0 padding 0 list-style none   sidebar li  margin-bottom 15px   sidebar li ul  padding 10px border-top none   sidebar li li  margin 0 padding 3px 0   sidebar li h2  height 36px margin 0 padding 10px 0 0 20px background  47872B font-size 18px color  fff   sidebar a link   sidebar a visited  text-decoration none   sidebar a hover  text-decoration underline   sidebar li a  padding-left 10px background url images img09 gif  no-repeat 1px 5px   footer  background  452809 height 47px width 780px margin 0 auto font-size 10px color  fff padding-top 23px text-align center    footer div  padding 10px 38px   footer a  color  fff font-size 10px text-decoration none   padding  padding 10px color  f00 font-weight bold    Any help would be greatly appreciated

User · Answer

Modern solution

Flexbox was created for exactly these kind of problems:

_x000D_

#container {_x000D_
    height: 150px;/*Only for the demo.*/_x000D_
    background-color:green;/*Only for the demo.*/_x000D_
    display: flex;_x000D_
    justify-content: center;_x000D_
    align-items: flex-end;_x000D_
}

_x000D_

<div id="container">_x000D_
    <span>Text align to center bottom.</span>_x000D_
</div>

_x000D_

Old school solution

If you don't want to mess with table displays, then you can create a <div> inside a relatively positioned parent container, place it to the bottom with absolute positioning, then make it 100% wide, so you can text-align it to the center:

_x000D_

#container {_x000D_
    height: 150px;/*Only for the demo.*/_x000D_
    background-color:green;/*Only for the demo.*/_x000D_
    position: relative;_x000D_
}_x000D_
_x000D_
#text {_x000D_
    position: absolute;_x000D_
    bottom: 0;_x000D_
    width: 100%;_x000D_
    text-align: center;_x000D_
}

_x000D_

<div id="container">_x000D_
    <span id="text">Text align to center bottom.</span>_x000D_
</div>

_x000D_

User · Answer

if your text doesn t spill over two rows then you can do line-height    in your CSS  the more line-height you give  the lower on the container it will hold

User · Answer

Sometimes you can play with padding and margin top  add line-height  etc   See fiddle    Style and text forked from  aspirinemaga   parent       width 300px      line-height 30px      border 1px solid red      padding-top 20px

User · Answer

To use vertical-align properly  you should do it on table tag  But there is a way to make other html tags to behave as a table by assigning them a css of display table to your parent  and display table-cell on your child  Then vertical-align bottom will work on that child   HTML          lt div class  parent  gt       lt div class  child  gt          This text is vertically aligned to bottom           lt  div gt   lt  div gt                            CSS     parent       width  300px      height  50px      display   table      border  1px solid red     child        display  table-cell      vertical-align  bottom       Here is a live example  link demo

User · Answer

Vertical align only works in some select cases  The easiest way to make it function is to set display  table in the parent element s CSS and display  table-cell  to the child element and then apply your vertical align attribute

[css] CSS vertical-align: text-bottom;

Modern solution

Old school solution

Examples related to css