Question

假设我有一个带有字体超棒图标和一些文字的引导按钮：

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

如何使文字垂直居中显示？文字现在与图标的下边缘对齐：http://jsfiddle.net/V7DLm/1/

修改我有一个可能的解决方案：http://jsfiddle.net/CLdeG/1/但感觉有点hacky - 介绍额外的p标签，使用pull-left和display：table。也许有人可以建议一种更简单的方法。

Answer 1

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

不使用文字的垂直对齐
使用font-awesome图标的垂直对齐方式

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

当然，您无法使用内联样式并使用自己的css类进行定位。但这可以复制粘贴的方式工作。

见这里： Vertical alignment of text and icon in button

如果由我决定，我不会使用icon-2x。并且只需自己指定font-size，如下所示

<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

Answer 2

我在99％的时间使用文本旁边的图标，所以我在全球范围内进行了更改：

.fa-2x {
  vertical-align: middle;
}

根据需要将3x，4x等添加到相同的定义中。

Answer 3

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

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

Answer 4

如果事情没有排成一行，那么在具有对齐问题的特定i.fa元素上通过CSS进行简单的line-height: inherit;就可以做到这一点。

您还可以使用全局解决方案，由于稍高的CSS特异性将覆盖FontAwesome的.fa规则，该规则指定line-height: 1而不需要!important属性：

i.fa {
  line-height: inherit;
}

请确保上述全局解决方案在您可能还使用FontAwesome图标的地方不会导致任何其他问题。

Answer 5

一个flexbox选项 - 字体很棒4.7及以下

FA 4.x托管网址 - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

<强>拨弄

http://jsfiddle.net/Hastig/V7DLm/180/

使用flex和font awesome 5

FA 5.x托管网址 - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

<强>拨弄

https://jsfiddle.net/3bpjvof2/

Answer 6

最简单的方法是将vertical-align css属性设置为中间

i.fa {
    vertical-align: middle;
}

Answer 7

这对我有用。

<form id='tip'>
Tip somebody: <input name="tip_email" id="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
 <input type="submit" id="submit" value="Skicka Tips"/>
 <input type="hidden" id="ad_id" name="ad_id" />
 </form>
<script>
$( "#tip" ).submit(function( e ) {
    e.preventDefault();
    $.ajax({
        url: tip.php,
        type:'POST',
        data:
        {
            tip_email: $('#tip_email').val(),
            ad_id: $('#ad_id').val()
        },
        success: function(msg)
        {

            alert('Email Sent');
        }               
    });
});
</script>

Answer 8

尝试将您的图标设为height: 100%

您无需对包装器（例如，按钮）执行任何操作。

这需要Font Awesome 5.不确定它是否适用于较旧的FA版本。

.wrap svg {
    height: 100%;
}

请注意，该图标实际上是svg图形。

Demo

Answer 9

微调图标行高的另一个选项是使用vertical-align属性的百分比。通常，0％是底部，100％是顶部，但可以使用负值或超过100来创建有趣的效果。

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

Answer 10

我会将文本换行，以便您可以单独定位它。现在，如果你向左和向左浮动，你可以使用line-height来控制垂直间距。将其设置为与（30px）相同的高度将使其对齐。请参阅here。

新标记：

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

新CSS：

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

Answer 11

使用flexbox时，文本旁边的字体真棒图标的垂直对齐可能非常困难。我尝试了边距和填充，但这移动了所有项目。我尝试了不同的柔性对齐，如中心，开始，基线等，但无济于事。仅调整图标的最简单，最干净的方法是将其设置为包含div position: relative; top: XX;。这完美地完成了工作。

Answer 12

对于使用Bootstrap 4的用户来说很简单：

wb = op.load_workbook(filepath, read_only=False, keep_vba=True) '->>>>>>>>>Using this to keep the macros.

Answer 13

只需为图标元素定义vertical-align属性：

div .icon {
   vertical-align: middle;
}

Answer 14

字体的解决方案是标准的，当我必须将一个图标置于字符串中时，我会使用它：https://fontawesome.com/how-to-use/svg-with-js

Answer 15

好吧，这个问题是几年前问的。我认为技术已经发生了很大变化，并且浏览器的兼容性要好得多。您可以使用vertical-align，但我认为有些可扩展性和重用性较低。我建议使用 flexbox 方法。

这里是原始海报使用的相同示例，但带有flexbox。它设置单个元素的样式。如果按钮大小由于任何原因而改变，它将继续在垂直和水平方向居中。

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

示例： https://issues.apache.org/jira/browse/CASSANDRA-14108

如何使用大字体 - 真棒图标垂直居中文字？

15 个答案: