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

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

如何使文本垂直居中显示?

推荐答案

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

100

CSS:

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

#ico {
    vertical-align: middle;
}

Html相关问答推荐

html中背景色的全单元格R中的Rmarkdown表

窗口对象中是否有对<;html&>根元素的引用?

将CSS应用于TD标记内的div

只有一行上有溢出的CSS网格

如何在排序上重用参数?

有没有一种方法可以提高代码中tailwind 类名的可读性?

悬停表格单元格文本时,使元素的字体大小更大,同时保持表格单元格的高度不变

为什么一个 CSS 网格框比其他网格框低?

Django 如何从文件系统下载文件?

如何动态调整彼此重叠的两个 div 的大小,使它们在增长时保持相同的高度

如何为某些行具有 rowspan 的表的每个奇数行着色

文本溢出:省略号不适用于 flexbox

我用 ejs 修复了一个奇怪的语法错误,我想知道问题出在哪里

嵌套固定定位的 Div 滚动条渗透到前景中的 Div

浮动元素忽略 margin-top 属性后的块元素

我如何使用 HTML 和 CSS 在我的下拉菜单中获得这种类型的样式

使用 htmloutput 在shiny 的应用程序中呈现文本

网站页脚中的 Quarto 安装版本

将固定/绝对伪元素放置在相对 div(具有滚动条)内,始终位于底部

我可以将两个元素之间的所有空间都放在弹性框或网格中吗?