文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用一个超大的字体图标使文本垂直居中？

问如何用一个超大的字体图标使文本垂直居中？
EN

Stack Overflow用户

提问于 2013-06-26 08:55:28

回答 15查看 275.4K关注 0票数 259

假设我有一个bootstrap按钮，上面有一个非常棒的字体图标和一些文本：

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

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

font-awesome

html

css

回答 15

Stack Overflow用户

回答已采纳

发布于 2013-09-03 09:32:17

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

请参阅

CSS:

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

#ico {
    vertical-align: middle;
}

票数 41

Stack Overflow用户

发布于 2013-08-31 05:08:13

我只能自己做这个，你需要反过来做。

do not play与文本的垂直对齐
play与字体的垂直对齐-真棒的图标

<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

但是，如果由我决定，我不会使用图标-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

票数 339

Stack Overflow用户

发布于 2015-04-01 21:53:24

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

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

根据需要在相同的定义中添加3x、4x等。

票数 57

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17309928

复制

相似问题

问如何用一个超大的字体图标使文本垂直居中？
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用一个超大的字体图标使文本垂直居中？EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用一个超大的字体图标使文本垂直居中？
EN