CODEWITHSUNDEEP
htmlcssimagecentervertical-alignment
Jojo01
Jojo01

Reputation: 1289

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/

Upvotes: 0

Views: 64

Answers (4)

Sajib Biswas
Sajib Biswas

Reputation: 463

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/

Upvotes: 1

Asons
Asons

Reputation: 87191

Just add 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>

Upvotes: 2

Dejan.S
Dejan.S

Reputation: 19138

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

Upvotes: 0

leofontes
leofontes

Reputation: 927

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.

Upvotes: 0

Related Questions