1

I'm struggling to get these buttons on the right and the heading on the left centered vertically on my navbar. I'm not using Bootstrap. I've tried a number of combinations of padding and margins and can't seem to make it work. Can anyone help please?

HTML:

<header>
<nav>
    <h1>Jason</h1>
    <div class="navbar-box">
        <ul id="navbar-links">
            <button>
                <li><a href="#">About</a></li>
            </button>
            <button>
                <li><a href="#">Portfolio</a></li>
            </button>
            <button>
                <li><a href="#">Contact</a></li>
            </button>
        </ul>
    </div>
</nav>
</header>

CSS:

nav {
  background-color: #061839;
  color: white;
  height: auto;

}
.navbar-box {
  background-color: #061839;
  color: white;
  height: 25px;
}
h1 {
  margin-top: 5px;
  padding-top: 40px;
  padding-left: 30px;
  font-size: 40px;
}
ul {
   list-style-type: none; 
}
li a {
  display: inline;
  float:right;
}
button {
    background-color: #4D638C;
    border: none;
    color: white;
    margin-right: 20px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    float:right;
    border-radius:12px;

}
Shady Alset
  • 5,548
  • 4
  • 21
  • 34
JCode777
  • 11
  • 2
  • there are many questions dealing with that. have a look at http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally or http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers – di3 Apr 30 '16 at 13:20
  • Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – di3 Apr 30 '16 at 13:22

2 Answers2

0

try adding display:inline-block and vertical-align:middle both to heading (h1) and buttons container which is .navbar-box

Raf
  • 352
  • 2
  • 11
  • Thanks! I think the problem the whole time was that I had display: inline-block on the buttons, but not the h1....that was making the buttons always display below the heading. – JCode777 Apr 30 '16 at 13:42
  • yes you need to display both elements inline-block to align them vertically. Glad I could help – Raf Apr 30 '16 at 13:44
0

Use margin auto that should centralise them

jkb114
  • 3
  • 1
  • 2