Css having trouble aligning image with text horizontally

Question

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.

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/

Answer 1

Just add vertical-align: middle; padding: 0; 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> 

Answer 2

Approach 1:

1. modify vertical-align: middle; property of .nav-logo to vertical-align: top;

2. add a property margin-top: 17px; to the .nav-items . You can adjust this margin and text height property upto your satisfaction.

jsfiddle: https://jsfiddle.net/sajibche/twpy8eq8/

Approach 2

Another dynamic solution: Just use vertical-align: bottom; for both .nav-logo and .nav-items elements.

jsfiddle: https://jsfiddle.net/sajibche/cd52ytch/

Answer 3

Try using the line height property of CSS on the text

http://www.w3schools.com/cssref/pr_dim_line-height.asp

If that doesn't work, try small adjustments using margin or padding.

Answer 4

You would have to put display: block; in order to make it work. Then you can controll the padding and margin. Note: add a clearfix class to your navbar also.

updated jsfiddle here

.navbar {
  width: 100%;
  border-bottom: 1px solid #C8C8C8;
  box-shadow: 0 1px 2px #000000;
  position: fixed;
  top: 0;
}

.nav-logo {
  width: 130px;
  height: 58px;
  line-height: 58px;
  display: block;
  float: left;
}

.nav-items {
  display: block;
  float: left;
  height: 58px;
  line-height: 58px;
  padding: 4px 0 0 0;
  box-sizing: border-box;
  background-color: aqua;
}

.nav-item {
  display: inline-block;
  font-size: 20px;
  background: aqua;
}