#nav {	
width: 800px;
height: 168px;	
vertical-align: bottom;
text-align: right;
background-image: url(design_r2_c2.jpg);
margin: 0 auto;	

}

 

i can't get my text to vertically align in my div. please help!

Hi Christopher,

 

Could we have a little more information about the problem — like the offending HTML code and also a link to a live version of the issue.

 

Unfortunately it's quite hard for us to diagnose a problem if we only have a snippet of CSS to go on.

the html is

 

<div id="nav">
 <p>home::page 2::page 3::</p>
</div>

 

i can't unfortunately give you the page, but i want to know if i've done anything wrong so far!

Hi Christopher,

If you are trying to place the place the paragraph at the bottom of the div, vertical align won't work.

You could apply padding-top or margin-top to the paragraph or position it absolutely.

Vertical align only applies to inline elements

thanks a bunch for that!

You can't vertically align block elements (the <div> and the <p>) like that, it only works on inline elements — and even then it only applies when there is content for it to align with. This is a common misconception with beginners.

 

Your best bet is to either position the <p> absolutely with bottom set to 0 (make sure the div is positioned relatively), or tweak the vertical position of the <p> by setting a fixed top margin.

Another way to do it would be to set a line height on the DIV tag...

 

<div id="nav">
home::page 2::page 3::
</div>

#nav {height: 3em; line-height: 3em;}/

 

or you could set it on a P tag...

 

<div id="nav">
<p>home::page 2::page 3::</p>
</div>

#nav p {line-height: 3em; margin: 0;}

That would align the text in the middle, though — he wanted it aligned to the bottom.

Hi Christopher,

If you are trying to place the place the paragraph at the bottom of the div, vertical align won't work.

You could apply padding-top or margin-top to the paragraph or position it absolutely.

Vertical align only applies to inline elements

 

i think vertical-align does not work for inline elements too, it only works for <td> or rather if we make any element display to table-cell, then it will work but display:table-cell; is not supported by IE.

i think vertical-align does not work for inline elements too, it only works for <td> or rather if we make any element display to table-cell, then it will work but display:table-cell; is not supported by IE.

According to my copy of CSS Pocket Reference (a handy little book!), vertical-align applies to table cells and inline-elements.