How to vertically align text with center of image when using Bootstrap.

Question

I am trying to create a header for my website. I want to have my logo at the top left corner and my nav bar at the top right corner of the window. My issue is that the nav bar is not aligned flush with the center of my logo. Here's the goods:

#logoHeader {
 float: left;
 vertical-align: middle;
}

ul {
 list-style: none;
 display: inline block;
 vertical-align: middle;
  
}

li {
 float: right; 
 padding: 10px;
 font-size: 22pt;
 display: inline-block;
}

.header .navContainer {
 height: 131px;
 vertical-align: middle;
}

<!DOCTYPE html> 
<html>

<head>
 <meta charset = "utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 <link type= "text/css" rel="stylesheet" href="all.css"/>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 <script type = "text/javascript" src = "index.js"></script>
 
 <title>JM</title> 
</head>

<body> 

<div class ="container">

 <div class="row">
     <div class="col-md-4 header">
     <img id = "logoHeader" src="file:///Users/Jon/Desktop/JM.COM/images/bigJM.png"/> 
     </div>
     <div class="cold-md-8 navContainer">
        <ul class = "navBar">
         <li>Home</li>
         <li>Blog</li>
         <li>Publications</li>
         <li>Contact</li>
        </ul>
     </div>
 
 </div>

</div>

</body>
</html>

this thread may helps you http://stackoverflow.com/questions/34912881/how-to-vertically-align-a-div-using-css/ — blurfx, Jan 21 '16 at 02:24

score 0 · Answer 1 · answered Jan 21 '16 at 02:28

Follow Bootstraps Rules

http://getbootstrap.com/components/#navbar

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"   integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-default">
      <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-example-navbar-collapse-1" 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="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  <body>

</html>

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

score 0 · Answer 2 · answered Jan 21 '16 at 04:46

0

In your bootstrap.min.css change margin-top and margin-bottom to 0px for ol and ul selectors

Example

ol, ul {
    margin-top: 0px;
    margin-bottom: 0px;
}

Also in your css codes in your question padding is also one of the issue. Setting a padding of 10px will result in top, bottom, left and right additional space.

change it to

li {
    float: right; 
    /*padding: 10px;*/
  padding-left: 10px;
  padding-right: 10px;
    font-size: 22pt;
    display: inline-block;
}

answered Jan 21 '16 at 04:46

repzero

8,254
2
18
40

This was helpful. I solved the issue by changing each div height to the same height as my logo, and then I set the line height of my ul to the same height as well. It naturally aligned the content. It looks like there are several ways to do this. Thanks for the response! – WriterState Jan 22 '16 at 16:01

How to vertically align text with center of image when using Bootstrap.

2 Answers2