如何在我的情況下將垂直對齊設置為中間？

Question

我正在嘗試修改htmls元素以實現兩件事：

1. 將兩個字形圖標和文本垂直對齊到中間。 （垂直對齊中間不起作用）

2. 修改css，使其在文本“感謝”和字形<icon><thanks><icon>之間留出很小的間隙，以使其類似於<icon><thanks><icon>而不是<icon> <thanks> <icon>

我創建了一個jsfiddle： https ://jsfiddle.net/vwdhd1wy/

它在沒有任何額外的CSS的情況下創建了兩個間隙，這似乎很奇怪。 有人可以幫我嗎？

Answer 1

工作代碼： https ： //jsfiddle.net/vwdhd1wy/4/

對於1.將兩個字形圖標和文本垂直對齊到中間。 （垂直對齊中間不起作用）。

您確實可以整理CSS，因為您不需要重復的代碼。 添加vertical-align: top; 到所有span元素，以確保它們都從相同的位置開始，因為相鄰的inline-block元素可能會因內容而混亂。

.glyphicon有一些繼承的代碼，它設置line-height: 1和top: 1px; 因此您需要使用div > span.glyphicon { line-height: 30px; top: 0px; } div > span.glyphicon { line-height: 30px; top: 0px; } div > span.glyphicon { line-height: 30px; top: 0px; } 。 其余的只是設置height: 30px; 和line-height: 30px; （將其放置在中間的行高）。

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

對於2。修改css，使其在文本“ thanks”和glyphicons之間留出很小的間隙，從而變為

正如@ryantdecker所說，在所有span元素之后刪除空格，以刪除顯示的多余空間。 之所以得到此空格，是因為將其設置為inline-block時將其視為“ inline”（文本）元素，因此，只要inline元素之間存在空格，則在呈現HTML時也會包含該空格。

解：

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

Answer 2

為你工作

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

像這樣的風格

  .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

請使用此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;
    }