Page 1 of 1

Centering text in div

Posted: Fri Dec 05, 2008 10:05 pm
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

Re: Centering text in div

Posted: Fri Dec 05, 2008 10:27 pm
by Syntac

Code: Select all

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