Unable to vertically align image with text on navigation - text displayed as block

Question

It's a silly question, but I can't vertically align the icons on the navigation with the text. I am trying to align them at the bottom, but anything works.

I can make it work if I give a height to the <li> elements, but I've been told it has to be "natural", so I can not give a height to the <li> elements. I could do it with position:relative and giving it some pixels for the top, but again, I've been told it should be "more natural", not giving specific number of pixels for the top....

I have look for possible solutions around old post and some say to use display-block and then vertical alignment, but it doesn't work.

Can someone see what I'm doing wrong?

Thank you

Here a jsfiddle: http://jsfiddle.net/3uwzcspn/

html:

    <div class="" id="">      
      <ul class="nav navbar-nav">
        <li>
          <a href="">
            <img src="http://s18.postimg.org/86tb8kv1h/icon1.png" alt=""/>
            <span>Manufracturer<span> </span>Approved</span></a>
        </li>
        <li>    
          <a href="">
            <img src="http://s11.postimg.org/aola8nkdr/icon2.png" alt=""/>
            <span>Customer 1st<span> </span>We'll visit you</span></a>
        </li>
        <li>
          <a href="">
            <img src="http://s30.postimg.org/5e6fr1p99/icon3.png" alt=""/>
            <span>Excess<span> </span>SAFE</span></a>
        </li>
        <li>
          <a href="">
            <img src="http://s30.postimg.org/a2mfm8efx/icon4.png" alt=""/>
            <span>Friendly Form- <span> </span>Free Help</span></a>
        </li>
        <li>    
          <a href="">
            <img src="http://s13.postimg.org/t1bjf5eur/icon5.png" alt=""/><span>FREE-<span> </span>Accident Management</span></a>
        </li>
      </ul>
    </div>     
  </div>
</nav>

css:

body {
    font-family:'Droid Sans', sans-serif;
}
/*unwanted default Bootstrap*/
.navbar-collapse{
  padding:0;
  margin:0;
}
.navbar-nav {
    width:100%;
    float:none;
    /*displaying inline block makes a little margin*/
    margin-top: 0.2%;
    margin-bottom: 0.1%;
}
.navbar-default {
    border:none;
    margin-bottom: 0;
    border-radius:0;
    box-shadow:none;
    background:none;
}
.navbar-brand {
    padding:0;
}

/**Top Navigation**/
.wrapperOrg {
     background: #f9540a;
}

#topNavigation {
   background: #f9540a;
   font-weight:700;
   font-size:1.2em;
}
#topNavigation li {
    border-right:2px solid #d93700;
    box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
    -webkit-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
   -moz-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5); 
}
#topNavigation li a {
    color: #fff;
    padding: 3%;
}
#topNavigation .navbar-nav li a:hover {
    color: #808080;
}
#topNavigation li a img {
  float: left;
  clear: left;
  display:inline-block;
  vertical-align:bottom;
}
#topNavigation li a span {
    display:inline-block;
}
#topNavigation li a span:last-child {
    display:block;
}
/*for better responsive*/
#topNavigation li:first-child {
    width:21%;
}
#topNavigation li:nth-child(2){
    width:19%;
}
#topNavigation li:nth-child(3){
    width:13%;
}
#topNavigation li:nth-child(4){
    width:20%;
}
#topNavigation li:last-child {
    width:27%;
    border:none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

Do you use **twitter-bootstrap** ? Because I see some familiar classes like _navbar_. — Anwar, Nov 30 '15 at 12:00
Possible duplicate of [How to vertically center align background image with text?](http://stackoverflow.com/questions/13435803/how-to-vertically-center-align-background-image-with-text) — easwee, Nov 30 '15 at 17:05

score 0 · Answer 1 · answered Nov 30 '15 at 11:59

0

One suggestion (I can't see it, because your images are blocked where I work), would be to give the li tags a line-height then use vertical-align on the images.

answered Nov 30 '15 at 11:59

rrd

5,789
3
28
36

mmmm I can't give the images line-height, it does nothing :S and if you mean taking of float left as Antonio suggested then they are displayed in just one line, and the text should look like it does – eve_mf Nov 30 '15 at 12:21

score 0 · Answer 2 · answered Nov 30 '15 at 12:05

Is this what you are looking for ? Expand in large view to see the output

Just give #topNavigation li a span:last-child{ line-height: 15px;}

body {
    font-family:'Droid Sans', sans-serif;
}
/*unwanted default Bootstrap*/
.navbar-collapse{
  padding:0;
  margin:0;
}
.navbar-nav {
    width:100%;
    float:none;
    /*displaying inline block makes a little margin*/
    margin-top: 0.2%;
    margin-bottom: 0.1%;
}
.navbar-default {
    border:none;
    margin-bottom: 0;
    border-radius:0;
    box-shadow:none;
    background:none;
}
.navbar-brand {
    padding:0;
}

/**Top Navigation**/
.wrapperOrg {
     background: #f9540a;
}

#topNavigation {
   background: #f9540a;
   font-weight:700;
   font-size:1.2em;
}
#topNavigation li {
    border-right:2px solid #d93700;
    box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
    -webkit-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
   -moz-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5); 
}
#topNavigation li a {
    color: #fff;
    padding: 3%;
}
#topNavigation .navbar-nav li a:hover {
    color: #808080;
}
#topNavigation li a img {
  float: left;
  clear: left;
  display:inline-block;
  vertical-align:bottom;
}
#topNavigation li a span {
    display:inline-block;
}
#topNavigation li a span:last-child {
    display:block;
    line-height: 15px;
}
/*for better responsive*/
#topNavigation li:first-child {
    width:21%;
}
#topNavigation li:nth-child(2){
    width:19%;
}
#topNavigation li:nth-child(3){
    width:13%;
}
#topNavigation li:nth-child(4){
    width:20%;
}
#topNavigation li:last-child {
    width:27%;
    border:none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
     <nav id="topNavigation" class="navbar navbar-default" role="navigation">
          <div class="container-fluid">
            
            <div class="" id="">      
              <ul class="nav navbar-nav">
                <li>
                  <a href="">
                    <img src="http://s18.postimg.org/86tb8kv1h/icon1.png" alt=""/>
                    <span>Manufracturer<span> </span>Approved</span></a>
                </li>
                <li> 
                  <a href="">
                    <img src="http://s11.postimg.org/aola8nkdr/icon2.png" alt=""/>
                    <span>Customer 1st<span> </span>We'll visit you</span></a>
                </li>
                <li>
                  <a href="">
                    <img src="http://s30.postimg.org/5e6fr1p99/icon3.png" alt=""/>
                    <span>Excess<span> </span>SAFE</span></a>
                </li>
                <li>
                  <a href="">
                    <img src="http://s30.postimg.org/a2mfm8efx/icon4.png" alt=""/>
                    <span>Friendly Form- <span> </span>Free Help</span></a>
                </li>
                <li> 
                  <a href="">
                    <img src="http://s13.postimg.org/t1bjf5eur/icon5.png" alt=""/><span>FREE-<span> </span>Accident Management</span></a>
                </li>
              </ul>
            </div>     
          </div>
        </nav>

I can use line-height. It is not "natural", and if you try it, the icons has different sizes so they need different line-height to be aligned at the bottom — eve_mf, Nov 30 '15 at 12:43

Antonio Smoljan · Answer 3 · 2015-11-30T12:29:31.243

0

Remove display:block from your span for the vertical align to work beacause it requires inline elements, we can use display:inline-block, now your li's have a set width so the text cannot expand correctly, we remove that. And lastly you don't need float:left on the image as it impedes vertical alignment.

Example

Code:

#topNavigation li a img {

  display:inline-block;
  vertical-align:bottom;
}

#topNavigation li a span {
    margin-left: 5px;
    display:inline-block;
    width: 80px;
}

/*for better responsive*/

edited Nov 30 '15 at 12:29

answered Nov 30 '15 at 12:05

Antonio Smoljan

2,187
1
12
11

I see.... but then if I do it this way it displays the spans inline, and they should look as my JSFIDDLE, the only different thing should be that the images are vertical alignment to the bottom. I've seen your example, but then they are displayed in one line, or in my case, if I take off float:left it displays the text in a different line.... – eve_mf Nov 30 '15 at 12:18
In that case just a a set width to the `span`. I've updated the example. – Antonio Smoljan Nov 30 '15 at 12:29
I think we have different ideas as to what vertical align does :D, you want the image to be below the text without changing the html markup? – Antonio Smoljan Nov 30 '15 at 12:57
no, I don't mind changing the markup, but the text has to be in two lines as it is in my jsfiddle. I need the same as my jsfiddle but the image aligned to the bottom. – eve_mf Nov 30 '15 at 13:06

Unable to vertically align image with text on navigation - text displayed as block

3 Answers3