1

I need to put the button in the center of the header element but it seems like I am not capable of doing that. How can I do It please?

Here is the HTML code:

<header>
<nav>
  <div class="logo"></div>
  <ul>
  <li><a href="">About</a></li>
  <li><a href="">Products</a></li>
  <li><a href="">Team</a></li>
  <li><a href="">Blog</a></li>
  <li><a href="">Contact</a></li>
  </ul>
</nav>


 <a href="" class="button">Kdo jsme?</a>

</header>

And here is the CSS code:

header{
background: url(header.jpg) no-repeat center;
background-size: cover;
width: 100%;
height: 700px;
text-align: center;
}

nav{
  width: auto; 
  height: 80px;
  float: top;
}

.logo{
display: block;
float:left;
background: url(logo.png) no-repeat;
height: 64px;
width: 64px;
margin: 70px 130px auto;

}

nav ul{
margin: 0px auto;
margin-right: 100px;
list-style-type: none;
}

nav ul li {
float: right;
padding: 0px 20px;
margin: 0 5px; 
margin-right: 50px;
font-size: 17px;
height: 73px;
line-height: 13em;

}

nav a {
color: #C3C2C4;
text-decoration: none;
font-family: Open Sans;
}

nav a:hover{
color: white;
}

.nadpis{
margin: auto;
color: white;
font-family: Open Sans;
text-align: center;
padding-top: 250px;
}


 .button {
  font-family: Open Sans;
    font-size: 18px;  
    color: white;
    text-align: center;
    border: 2px solid white;
    border-radius: 20px;
    height: 40px;
    width: 200px;
    margin: 0px auto;
    padding-top: 10px; 
  display: block; 
  }

I have already tried to wrap the button into a div element and center the div but It didn't seem to work.

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
user3654045
  • 77
  • 1
  • 12
  • i put it in a jsfiddle , but it seems like this would work fine. http://jsfiddle.net/jz3Ft/1/ – Sten Pelzer May 20 '14 at 11:18
  • Regarding your [deleted question](http://stackoverflow.com/q/23764221/1331430): "responsive" is mostly a concept, hence your question was too broad for our Q&A format. I'd suggest you look up fluid layouts though. – Fabrício Matté May 20 '14 at 15:44

2 Answers2

2

It is in the middle, just change your button class style to this :

    .button {
        font-family: Open Sans;
        font-size: 18px;
        color: #000000;
        text-align: center;
        border: 2px solid #FF0000;
        border-radius: 20px;
        height: 40px;
        width: 200px;
        margin: 0px auto;
        padding-top: 10px;
        display: block;
        margin-top:40px;
    }

NOTE: it is not responsive, good idea to keep that in mind depending on your requirements

EaziLuizi
  • 1,557
  • 1
  • 16
  • 25
  • It is centered horizontally but I can't figure out how to center It vertically. And how can I make it responsive if I can ask? – user3654045 May 20 '14 at 11:22
  • [heres](http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css) a link about vertical alignment , by responsive i mean change your browsers size and see what happens to your navbar ... google it to learn more – EaziLuizi May 20 '14 at 11:28
1

Looks like it is in the center to me see my fiddle

Changed to this so I could see it

color: black;
rodgerogers
  • 11
  • 2