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

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

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

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

Modern solution  Flexbox was created for exactly these kind of problems    x000D   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   lt div id  container  gt  x000D       lt span gt Text align to center bottom  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    Old school solution  If you don t want to mess with table displays  then you can create a  lt div gt  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   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   lt div id  container  gt  x000D       lt span id  text  gt Text align to center bottom  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

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

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

Examples related to css