CODEWITHSUNDEEP
htmlcssbutton
Jesse
Jesse

Reputation: 457

How to vertically center navbar title relative to buttons

I cannot figure out how to vertically center my navbar title.

In the example below (see link), I would like to lower the "Title" such that it is vertically centered within the sticky navbar.

Any help would be much appreciated.

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: white;
  color: black;
}

button {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

button:focus {
  outline: 0;
}

nav {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;

  background-color: yellow;
  border-bottom: thin orange solid;
  text-align: center;
}

nav.stickyNav {
  position: fixed;
  top: 0;
  left: 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

nav ul li {
  display: inline;
}

nav ul li h1 {
  display: inline;
}

nav ul li h1.navTitle {
  /* What goes here to vertically center the title? */
}

nav ul li button {
  margin: 0;
  padding: 12px;
}

nav ul li button:focus {
  background-color: purple;
}

nav ul li button:active {
  background-color: green;
}

nav ul li button.navBtnLeft {
  float: left;
}

nav ul li button.navBtnRight {
  float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<body>
  <!-- Navbar -->
  <nav class="stickyNav">
    <ul>
      <!-- Left Button -->
      <li>
        <button class="navBtnLeft"><i class="fa fa-fw fa-2x fa-bars"></i></button>
      </li>

      <!-- Right Button -->
      <li>
        <button class="navBtnRight"><i class="fa fa-fw fa-2x fa-comment"></i></button>
      </li>

      <!-- Title -->
      <li>
        <h1 class="navTitle">Title</h1>
      </li>
    </ul>
  </nav>
</body>

Upvotes: 1

Views: 191

Answers (2)

Kalvin Klien
Kalvin Klien

Reputation: 921

you can set the nav to display:table; and then use vertical to middle:

.stickyNav li
{
   display:table-cell;
}

.titleClass
{
   vertical-align:middle;
}

I havent tested this, but it should work in most cases. Unless you have to do a lot of compatibility testing with older browsers.

Then you might as well hard code it as in answer above.

Upvotes: 0

Pat
Pat

Reputation: 2750

.navTitle{
    line-height: 50px;
}

EDIT:

If you don't want to hard code it you can use table-cells, here is an example of what I mean: https://jsfiddle.net/aw30L9bh/

Upvotes: 3

Related Questions