假设我有一个bootstrap按钮,带有一个字体很棒的图标和一些文本:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

我如何使文本显示垂直居中? 文本现在与图标的底部边缘对齐:http://jsfiddle.net/V7DLm/1/


当前回答

这个问题几年前就有人问过了。我认为技术已经发生了很大的变化,浏览器的兼容性也更好了。你可以使用垂直对齐,但我认为它的可伸缩性和可重用性较差。我建议使用flexbox方法。

下面是原始海报使用的相同示例,但使用了flexbox。它为单个元素设置样式。如果按钮大小因某种原因而改变,它将继续保持垂直和水平居中。

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

例如:JsFiddle

其他回答

在考虑了所有建议的选项后,最干净的解决方案似乎是设置行高和垂直对齐:

参见Jsfiddle Demo

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

我必须自己做这件事,你需要反过来做。

不要玩弄文字的垂直对齐 玩垂直对齐的字体-真棒的图标

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

当然,您不能使用内联样式并将其与您自己的css类相匹配。但这是以复制粘贴的方式工作的。

在这里看到的: 按钮中的文本和图标垂直对齐

然而,如果由我来决定,我不会使用icon-2x。并简单地自己指定字体大小,如下所示

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>
.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

有关工作示例,请参阅JsFiddle

简单地定义图标元素的垂直对齐属性:

div .icon {
   vertical-align: middle;
}

当使用flexbox时,字体和文字旁边的图标垂直对齐是非常困难的。我尝试了页边距和填充,但这移动了所有项目。我尝试了不同的弯曲对齐,如中心,开始,基线等,没有任何效果。调整图标的最简单和最干净的方法是将其包含的div设置为position: relative;上图:XX;这件事做得很完美。

这对我来说很有效。

i.fa {
  line-height: 100%;
}