Jojo01 Jojo01 - 1 year ago 68
HTML Question

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/

Answer Source
  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/