Content inside a div block not aligning vertically

Question

I have a fixed-top navigation bar with content inside that needs to be center aligned vertically. Additionally, I'm using bootstrap to me design my page. The navigation bar has two major content blocks. One is an image as my nav header and one has a container of an with links.

The container I wrapped around the two does not have any vertical padding and only has margins for content going underneath it.

<!--Navigation Bar-->
    <nav class="navbar navbar-default navbar-fixed-top navbar-wrap">
        <div class="container-fluid">
            <div class="navbar-header">
                <img src="img/logo.png" />
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#about">Who Am I?</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>

What I have tried doing is set the .container-fluid>ul to be relative to the container and set the margin to auto. I do not want to have a fixed margin or padding for it since I want the site to scale well even on mobile devices (hence why I'm using bootstrap).

I am a very amateur developer and just trying to get a site off the ground so I can showcase my projects from school and side gigs.

Thanks in advanced, if you would like to see my CSS. I can edit it in too.

https://i.stack.imgur.com/qIZZm.jpg

.navbar-wrap {
    padding: 0;
    background-color: #77B69C;
}

.nav {
    padding-right: 15px;
}

.navbar-right {
    margin-right: 0;
}

.container-fluid>ul {
    position: relative;
    height: 100%;
    margin: auto;
}

.navbar-default .navbar-nav>li>a {
    color: #ECF0F1;
    border-radius: 5px;
    transition: background-color 0.5s;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #171F26;
    background-color: #fff;
}

Please post a working example of your code (HTML/CSS/JS) in a Snippet. https://stackoverflow.com/help/mcve — vanburen, Sep 25 '15 at 22:01
the .navbar-nav>li>a elements have a bottom/top padding that makes the menu vertically aligned by default. maybe your problem is your logo.png image, that could be increasing the default height of the menu bar. we can try to find a solution if you share some css / the image. — Romulo, Sep 25 '15 at 22:10
The code looks fine on my machine. What do you mean by not aligning vertically? — Sohrab Hejazi, Sep 25 '15 at 22:13

score 1 · Accepted Answer · answered Sep 26 '15 at 01:44

There are multiple ways you can handle this depending on what makes most sense.

1) You could actually use text and adjust it with CSS like in the first navbar example.
2) You can constrain the image to the navbars default height like in example 2.
3) And you can adjust the height and line height like in example 3 for an image that exceeds the height of the navbar.

** Also, if you are using a preprocessor (LESS or SASS) you can easily adjust the height and the rest is handled.

I also inserted the HTML so your navbar collapses (Navbar Docs)under 768px into the mobile configuration (unsure if the omission was meant or not).

(if you do use the 2nd or 3rd option just remove the margin-top class from navbar-wrap* so the nav is fixed to the top again.)

@import url(https://fonts.googleapis.com/css?family=Hind+Vadodara);

/**Text CSS**/

.navbar.navbar-wrap {
  background: #77B69C;
}
.navbar a.navbar-brand,
.navbar a.navbar-brand:hover,
.navbar a.navbar-brand:focus {
  font-family: 'Hind Vadodara', sans-serif;
  font-size: 30px;
  color: #000;
  letter-spacing: 5px;
}
.navbar .navbar-brand span.lname {
  color: #fff;
}
.navbar.navbar-wrap .navbar-nav > li > a {
  font-family: 'Hind Vadodara', sans-serif;
  color: #ECF0F1;
  border-radius: 5px;
  transition: background-color 0.5s;
}
.navbar.navbar-wrap .navbar-nav > li > a:hover {
  color: #171F26;
  background-color: #fff;
}
@media (min-width: 768px) {
  .navbar.navbar-wrap .navbar-right {
    margin-right: 15px;
  }
  .navbar.navbar-wrap .navbar-brand {
    margin-left: 15px;
  }
}
/**IMG CSS**/

.navbar.navbar-wrap2 .navbar-brand {
  padding: 0;
  margin: 0;
}
.navbar.navbar-wrap2 .navbar-brand img {
  height: 50px;
  width: 300px;
  padding: 0;
  margin: 0;
  left: 0;
}
.navbar.navbar-wrap2 {
  background: #77B69C;
  margin-top: 200px;
}
.navbar.navbar-wrap2 .navbar-nav > li > a {
  font-family: 'Hind Vadodara', sans-serif;
  color: #ECF0F1;
  border-radius: 5px;
  transition: background-color 0.5s;
}
.navbar.navbar-wrap2 .navbar-nav > li > a:hover {
  color: #171F26;
  background-color: #fff;
}
.navbar.navbar-wrap2 .navbar-brand img {
  margin-left: 15px;
}
@media (min-width: 768px) {
  .navbar.navbar-wrap2 .navbar-right {
    margin-right: 15px;
  }
}
/**LARGE IMG CSS**/

.navbar.navbar-wrap3 .navbar-brand {
  padding: 0;
  margin: 0;
}
.navbar.navbar-wrap3 .navbar-brand img {
  height: 75px;
  width: 300px;
  padding: 0;
  margin: 0;
  left: 0;
}
.navbar.navbar-wrap3 {
  background: #77B69C;
  margin-top: 400px;
}
.navbar.navbar-wrap3 .navbar-header {
  height: 75px;
}
.navbar.navbar-wrap3 .navbar-toggle {
  margin-top: 20px;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
  font-family: 'Hind Vadodara', sans-serif;
  color: #ECF0F1;
  border-radius: 5px;
  transition: background-color 0.5s;
}
.navbar.navbar-wrap3 .navbar-nav > li > a:hover {
  color: #171F26;
  background-color: #fff;
}
.navbar.navbar-wrap3 .navbar-brand img {
  margin-left: 15px;
}
@media (min-width: 768px) {
  .navbar.navbar-wrap3 .navbar-right {
    margin-right: 15px;
  }
  .navbar.navbar-wrap3 .navbar-nav > li > a {
    line-height: 45px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-wrap navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#"><span class="fname">James</span> <span class="lname">Wong</span></a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Who Am I?</a>

        </li>
        <li><a href="#projects">Projects</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap2 navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand" href="#">
        <img src="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
      </a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nav2">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Who Am I?</a>

        </li>
        <li><a href="#projects">Projects</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap3 navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav3" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand" href="#">
        <img src="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
      </a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nav3">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Who Am I?</a>

        </li>
        <li><a href="#projects">Projects</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

Extremely helpful answer! Additionally, thank you for the example! I really appreciate it. — JaayW, Sep 27 '15 at 02:24

Content inside a div block not aligning vertically

1 Answers1

Linked