# How do i vertically align text inside of a div

**URL:** <https://forum.kirupa.com/t/how-do-i-vertically-align-text-inside-of-a-div/64331>\
**Category:** Uncategorized\
**Created:** [September 15, 2004, 7:53am UTC](https://forum.kirupa.com/t/how-do-i-vertically-align-text-inside-of-a-div/64331 "2004-09-15T07:53:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![GOLGO\_13](https://avatars.discourse-cdn.com/v4/letter/g/e47c2d/32.png) [@GOLGO\_13](https://forum.kirupa.com/u/GOLGO_13)\
**Post date:** [September 15, 2004, 7:53am UTC](https://forum.kirupa.com/t/how-do-i-vertically-align-text-inside-of-a-div/64331/1 "2004-09-15T07:53:15Z")

</div>

okay… i _think_ this should be an easy one! i’ve got a “navigation bar” at the top of my page, which is a large div tag, with two smaller divs inside.

_ **"logo"** _ div contains a logo, and _ **"navigation"** _ contains text navigation links. the size of the nav bar is set to 40px in hieght. the logo is 39px high. [color=red] **i want the navigation text links to sit at the very bottom of the 40px high div. how do i do that?**  
[/color]  
i’ve seen and tried various attributes _(align bottom, baseline)_ , but they dont seem to be working the way i want - with those, for some reason the text just ends up in the middle of the div…:h:

here’s the code i’ve got so far that ISNT working right:

```auto
 div.navigation { 
border:none;
min-height: 39px;
margin-left: 10px;
line-height: 39px; 
font-size: 8pt; 
vertical-align: bottom; 
float:left;
display:inline;/* ie double margin fix*/
}

```

```auto

 

	 [img]http://www.kirupaforum.com/forums/logo.gif[/img]

	 

	 news 
	 projects 
	 about 
	 info 
	 contact 
	 recent 
	 links 
		

 

```

what am i doing wrong? i’m no CSS master, thats for sure, so maybe there’s just something wrong in my code i dont see!

**thanks for any help!**

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 15, 2004, 8:00am UTC](https://forum.kirupa.com/t/how-do-i-vertically-align-text-inside-of-a-div/64331/2 "2004-09-15T08:00:08Z")

</div>

hmm… even though i wrapped the code in the html wysiwyg braces… the post doesnt seem to want to display my code… so, i’ll repost it… never mind all the spaces in the tags, i just want you guys to be able to see what i’m talking about:

```auto
 div.navigation { 
border:none;
min-height: 39px;
margin-left: 10px;
line-height: 39px; 
font-size: 8pt; 
vertical-align: bottom; 
float:left;
display:inline;/* ie double margin fix*/
}

```

\*\*\< div class=“navbar” \> \*\*

\*\*\< div class=“logo” \>\< img src=“logo.gif” \>\< /div\> \*\*  
\*\*\< div class=“navigation” \> \*\*  
\*\*\< a href="#news" class=“navi” \>news\< /a\> \*\*  
\*\*\< a href="#projects" class=“navi” \>projects\< /a\> \*\*  
\*\*\< a href="#about" class=“navi” \>about\< /a\> \*\*  
\*\*\< a href="#info" class=“navi”\>info\< /a \> \*\*  
\*\*\< a href="#contact" class=“navi” \>contact\< /a\> \*\*  
\*\*\< a href="#recent" class=“navi” \>recent\< /a\> \*\*  
\*\*\< a href="#links" class=“navi” \>links\< /a\> \*\*  
\*\*\< /div\> \*\*

**\< /div\>**

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 15, 2004, 8:26am UTC](https://forum.kirupa.com/t/how-do-i-vertically-align-text-inside-of-a-div/64331/3 "2004-09-15T08:26:38Z")

</div>

You shoul duse css positioning eg.

div.navigation {  
border:none;  
min-height: 39px;  
margin-left: 10px;  
line-height: 39px;  
font-size: 8pt;  
**position:relative;  
bottom: 0px;**  
float:left;  
display:inline;/\* ie double margin fix\*/  
}