Centering text in div

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
LiveFree
Forum Contributor
Posts: 258
Joined: Tue Dec 06, 2005 5:34 pm
Location: W-Town

Centering text in div

Post by LiveFree »

Good evening all,

I am having a rather persistent problem trying to center text in a div that is a rounded corner rectangle.

I have tried using line-height, vertical-align, and the margin, and padding properties, to no avail. Has someone worked this before and might have a helpful hint?

Code:

Code: Select all

.navMenu {
     width: 100%;
     text-align: center;
     height: auto;
}.nav_bl {
    background: url(nav_bl.png) 0 100% no-repeat #FFFFFF;
    width: 100%;
    
}
.nav_br {
    background: url(nav_br.png) 100% 100% no-repeat
}
.nav_tl {
    background: url(nav_tl.png) 0 0 no-repeat
}
.nav_tr {
    background: url(nav_tr.png) 100% 0 no-repeat;
    padding:3px
}

Code: Select all

<div class="navMenu">
            <div class="nav_bl"><div class="nav_br"><div class="nav_tl"><div class="nav_tr">
                <a href="#">Home</a>&nbsp;&nbsp;<img src='nav_bullet.png' />&nbsp;&nbsp;<a href="#">Products</a>&nbsp;&nbsp;<img src='nav_bullet.png' />&nbsp;&nbsp;<a href="#">Blog</a>&nbsp;&nbsp;<img src='nav_bullet.png' />&nbsp;&nbsp;<a href='#'>Contact Me</a>&nbsp;&nbsp;<img src='nav_bullet.png' />&nbsp;&nbsp;<a href='#'>About Me</a>  
            </div></div></div></div>
        </div>
The bottom 3 CSS declarations you see are the 4 corner pieces for the rectangular box.

Any help would be GREATLY appreciated,
Thank you
User avatar
Syntac
Forum Contributor
Posts: 327
Joined: Sun Sep 14, 2008 7:59 pm

Re: Centering text in div

Post by Syntac »

Code: Select all

<div style="text-align: center;">This text is centered.</div>
Post Reply