Question

我正在尝试修改htmls元素以实现两件事：

垂直对齐两个字形和文本到中间。（垂直对齐中间不起作用）
修改css，使文本“thanks”和glyphicons之间的差距变得像<icon><thanks><icon>而不是<icon> <thanks> <icon>

我创建了一个jsfiddle： https://jsfiddle.net/vwdhd1wy/

它似乎很奇怪，它创造了两个没有任何额外的CSS的差距。有人能帮帮我吗？

Answer 1

For 1.将两个glyphicons和text垂直对齐到中间。（垂直对齐中间不起作用）。

你可以真正整理CSS，因为你不想重复代码。将vertical-align: top;添加到所有span元素以确保它们都在相同的位置开始，因为彼此相邻的inline-block元素可能会因其内容而变得混乱。

.glyphicon有一些继承的代码设置line-height: 1和top: 1px;，因此您需要使用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; 
}

For 2.修改css，使文本“thanks”和glyphicons之间的间隙变小，而不是

正如@ryantdecker所说，删除所有span元素后面的空格，以删除显示的额外空格。你得到这个空格是因为当设置为内联块时它被视为“内联”（文本）元素，所以只要内联元素之间有空格，它在渲染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;
    }

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

3 个答案: