Jojo01 Jojo01 - 7 months ago 22
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
  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/