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.
:)
This question is related to
css
Flexbox was created for exactly these kind of problems:
#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_
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 {_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_
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;
}
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.
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.
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:
??????<div class="parent">
<div class="child">
This text is vertically aligned to bottom.
</div>
</div>????????????????????????
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
Source: Stackoverflow.com