CSS vertical-align: text-bottom;

Question

Hi there I'm trying to position text to the bottom of the <div>. 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.

:)

Answer 1

Modern solution

Flexbox was created for exactly these kind of problems:

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

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

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:

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

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