Jojo01 Jojo01 - 1 year ago 86
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.



/* 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;


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


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.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download