Center text within a div

Question

I am having difficulty trying to center my navigation text on my page. I want all my links to be in the center of my page the whole time, even if I re-size my window. Thanks for your time.

HTML:

<div id="navcont">
     <div id="navigation">
        <ul>
            <li class="home"><a href="#home">Home</a></li>
            <li class="about"><a href="#about">About me</a></li>
            <li class="portfolio"><a href="#portfolio">Portfolio</a></li>
            <li class="contact"><a href="#talktome">Talk to me</a></li>
        </ul>
</div>
</div>

CSS:

#navcont{
    height: 80px;
    background-color: #ebebeb;
    width: 100%;
    padding-top: 10px;
}
#navigation{
    font-size: 15px;
    font-family: "TYPOGRAPH PRO" arial;
}
#navigation ul li{
    list-style:none;
    display:inline-block;
    background-color:red;
    width:120px;
}
#navigation ul li a{
    text-transform:uppercase;
    text-decoration:none;
    color:black;
}
#navigation ul li a:hover{
    color:#217c7e;
}

I like helping people. But this has been asked about a billion times. It would only take a few minutes to search and to find the answer literally -> In the related i see 10 sorry for being an ahole but just being honest. — Cam, Jan 14 '14 at 21:26
I've already tried this, but the nav is not 100% centered, its offset to the right slightly. — trav164, Jan 14 '14 at 23:52

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

You want to use

text-align:center;

for this example. But if you make it more complex you may want to look at margin:0 auto; on the parent div. Also worth noting that in order for it to actually look center you will need to adjust the margins automatically applied to UL and LI

JS Fiddle: http://jsfiddle.net/W4eF3/

edited May 23 '17 at 12:21

Community

1
1

answered Jan 14 '14 at 21:34

tim.baker

3,109
6
27
51

score 0 · Answer 2 · answered Jan 14 '14 at 21:29

You should be able to just add text-align: center to your ul.

#navigation ul{
    text-align: center;
}

This will center all the li elements, as well as the text inside them. If you don't want the text to center you could add a text-align: left to the li elements.

http://jsfiddle.net/ctCKg/

EDIT: But like others have said, this should be an easy search or trial and error for you. Lots of ways to do it too.

score 0 · Answer 3 · answered Jan 14 '14 at 21:30

0

Add one property to your div CSS my friend

 #navigation {
   font-size: 15px;
    font-family: "TYPOGRAPH PRO" arial;
   text-align:center;
 }

like this

answered Jan 14 '14 at 21:30

Girish

1,717
1
18
30

@user3179106 , is it helps you – Girish Jan 14 '14 at 21:32
@user3179106 if it helps you please right click on my answer so it will be helpfull for others my friend – Girish Jan 14 '14 at 21:37

Center text within a div

3 Answers3