CSS无法将图像与文本水平对齐

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;
}