CODEWITHSUNDEEP
htmlcsscentervertical-alignment
TupidaMC - DEV
TupidaMC - DEV

Reputation: 47

Navbar horizontal + vertical centered

How can I center this navbar horizontal and vertical?

Here is a screenshot of my navigation bar: http://puu.sh/7luYN

HTML code

<div class="content">
    <div class="nav">
        <ul>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Startseite</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Leistungen</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Referenzen</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Kontakt</a></li>
        </ul>
    </div>
</div>

CSS code

.nav {
    background-color: #CCCCCC;
    font-family: 'Source Sans Pro', sans-serif;
    height: 45px;
    padding-left: 170px;
}
.content {
    width: 800px;
    height: 500px;
    margin:0 auto;
}

.nav ul li {
    list-style-type: none;
    text-align: center;
    width: auto;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    margin:0 auto;
}
.nav a {
display: block;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #000000;
text-decoration: none;

}

I already got it to center it horizontal but how can I center it vertical?

I hope for your answers,

Thanks Felix

Upvotes: 0

Views: 115

Answers (4)

B. E. A. G. M. B.
B. E. A. G. M. B.

Reputation: 21

Single-line approximation for a vertical align : .nav {margin-top : 45%;} (I wanted to add this as a comment for Daniel Rogi's answer, but I haven't enough reputation points...)

Upvotes: 0

Hans Roerdinkholder
Hans Roerdinkholder

Reputation: 3000

There are multiple ways to do it, see the following article: http://phrogz.net/CSS/vertical-align/

My favorite way is to use display: table; (on container) and display: table-cell combined with vertical-align: middle (on items itself) as shown in this fiddle:

http://jsfiddle.net/G6vxs/

Upvotes: 0

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

Here is a PEN I created for a similar answer. There are 3 ways to vertically align your content. The best suited here, according to me will be the line height method.

Upvotes: 1

Daniel Rogi
Daniel Rogi

Reputation: 328

If you want to use only css, you need to set it with position absolute, top and left to 50% and set the margin-top and margin-left to -height/2 and -width/2.

position: absolute;
top: 50%;
left: 50%;
height: 45px;
margin-top: -22.5px;
width: 440px;
margin-left: -220px;

http://jsbin.com/galapudo/1/edit?html,output

If you want to put centered vertical/horizontal inside other div, set that div with position:relative;

I hope that this helps you.

Upvotes: 0

Related Questions