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

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