如何在我的情况下将垂直对齐设置为中间？

Question

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

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

2. 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?

Answer 1

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; } div > span.glyphicon { line-height: 30px; top: 0px; } 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>

Answer 2

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

Answer 3

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