How to set vertical align to middle in my case?

Question

I am trying to modify htmls element to achieve two things:

Vertical align two glyphicons and texts to middle. (vertical align middle doesn't work)
Modify css to have a small gap between text "thanks" and glyphicons to become something like <icon><thanks><icon> instead of <icon> <thanks> <icon>

I have created a jsfiddle: https://jsfiddle.net/vwdhd1wy/

It seems odd that it created two gap without any additional css. Can someone help me about it?

```vertical-align:middle;``` will solve your problem just add it to the ```.glyphicon-forward:before``` — aavrug, Mar 29 '17 at 03:34
https://jsfiddle.net/vwdhd1wy/1/ you can just remove the linebreaks/whitespace between the span elements in your code -- some folks already wrote out a very detailed explanation: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements?rq=1 — ryantdecker, Mar 29 '17 at 03:34

Leggy · Accepted Answer · 2017-03-29T04:08:57.820

Working Code: https://jsfiddle.net/vwdhd1wy/4/

For 1. Vertical align two glyphicons and texts to middle. (vertical align middle doesn't work).

You can really tidy up the CSS as you don't want repeated code. Add vertical-align: top; to all span elements to ensure they are all starting at the same position as inline-block elements next to each other can get messy depending on their contents.

There is some inherited code for .glyphicon which is setting line-height: 1 and top: 1px; so you need to override this with div > span.glyphicon { line-height: 30px; top: 0px; }. The rest is just setting height: 30px; and the line-height: 30px; (line-height for placing it in the middle).

div > span {  
  display: inline-block;
  vertical-align: top;  
}

div > span, div > span.glyphicon { 
  height: 30px;
  line-height: 30px; 
  top: 0px;
}

.left, .right {
  background-color: red;  
}

.middle {
  background-color: grey; 
}

For 2. Modify css to have a small gap between text "thanks" and glyphicons to become something like instead of

As @ryantdecker said, remove the whitespace after all the span elements to remove the extra space that's showing. You get this whitespace due to it being treated as an "inline" (text) element when set to inline-block so whenever there is a space between inline elements, it also includes that when rendering the HTML.

Solution:

<span class="left glyphicon glyphicon-forward"></span><span class="middle">Thansk</span><span class="right glyphicon glyphicon-backward"></span>

score 2 · Answer 2 · answered Mar 29 '17 at 06:44

This work for you

   <div>
       <span class="left glyphicon glyphicon-forward"></span>
       <span class="middle">Thansk</span>
       <span class="right glyphicon glyphicon-backward"></span>
    </div>

And style like this

  .left {
      background-color: red;
      height: 30px;
    }

    .middle {
      height: 30px;
      display:inline-block;
      background-color: grey;
      vertical-align:middle;
    }

    .right {
      background-color: red;
        height: 30px;
    }
    span {
       align-items: center;
       display: inline-flex !important;
       flex-wrap: wrap;
    }

score 1 · Answer 3 · answered Mar 29 '17 at 03:29

Please use this HTML/CSS

<div class="mid">
   <span class="left glyphicon glyphicon-forward"></span>
   <span class="middle">Thansk</span>
   <span class="right glyphicon glyphicon-backward"></span>
</div>


    .mid{display:table;}
    .left {
      background-color: red;
      height: 30px;
      vertical-align:middle;
       display:table-cell;
    }

    .middle {
      height: 30px;
      display:table-cell;
      background-color: grey;
      vertical-align:middle;
    }

    .right {
      background-color: red;
        height: 30px;
        vertical-align:middle;
         display:table-cell;
    }

How to set vertical align to middle in my case?

3 Answers3