Search code examples
htmlcssimagecentervertical-alignment

Css having trouble aligning image with text horizontally

I'm having touble aligning my text horizontally with my image... It's actually aligned horizontally, but the image creates the illusion that it's not.

problem

Code(CSS):

/* Copyright © 2016 Dynavio Cooperative */
.navbar {
    width: 100%;
    border-bottom: 1px solid #C8C8C8;
    box-shadow:  0 1px 2px #000000;
}
.nav-logo {
    width: 130px;
    height: 58px;
    display: inline-block;
    vertical-align: middle;
}
.nav-items {
    display: inline-block;
}
.nav-item {
    display: inline-block;
    font-family: SinkinSansRegular;
    font-size: 20px;
}

Code(HTML):

<div class="navbar">
<img src="../images/logo.png" class="nav-logo">
<ul class="nav-items">
<li class="nav-item">Homepage</li>
</ul>
</div>

JsFiddle: https://jsfiddle.net/ha91bzsu/

Solution

  • Just add vertical-align: middle; padding: 0; to your .nav-items rule and you'll get an equivalent result across browsers

    Stack snippet

    /* Copyright © 2016 Dynavio Cooperative */
.navbar {
  width: 100%;
  border-bottom: 1px solid #C8C8C8;
  box-shadow:  0 1px 2px #000000;
  position: fixed;
  top: 0;
}
.nav-logo {
  width: 130px;
  height: 58px;
  display: inline-block;
  vertical-align: middle;
}
.nav-items {
  display: inline-block;
  vertical-align: middle;
  padding: 0;
}
.nav-item {
  display: inline-block;
  font-size: 20px;
}
    <div class="navbar">
  <img src="http://87.92.41.2/logo.png" class="nav-logo">
  <ul class="nav-items">
    <li class="nav-item">Homepage</li>
  </ul>
</div>