使图标大于文本，但两者仍垂直居中[重复]
我想实现这张照片的按钮，但我不知道如何将图标与文本对齐？
当前代码：
.btn {
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
color: #ffffff;
font-size: 17px;
background: #72a031;
display: inline-block;
padding: 0px 30px 0px 25px;
text-decoration: none;
}
.btn:hover {
background: #61872c;
text-decoration: none;
} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<button class='btn'>
<i style="font-size: 1.73em; position: relative;" class="fab fa-steam-symbol"></i> Log in with Steam
</button>我知道这很混乱，真的很晚了，我只想让这个简单的东西发挥作用！
共有1个答案
您只需使用将垂直对齐：中间添加到按钮内的所有元素/内容即可。btn*作为CSS选择器：
.btn {
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
color: #ffffff;
font-size: 17px;
background: #72a031;
display: inline-block;
padding: 0px 30px 0px 25px;
text-decoration: none;
}
.btn * {
vertical-align: middle;
}
.btn:hover {
background: #61872c;
text-decoration: none;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<button class='btn'>
<i style="font-size: 1.73em; position: relative;" class="fab fa-steam-symbol"></i> Log in with Steam
</button>-
我正在使用一个字体可怕的图标在成功的模式。我想使图标更大，问题是文本不再垂直居中，如果我这样做。
-
问题内容： 可以说我有一个带有字体真棒图标和一些文本的引导按钮： 编辑： 我有一个可能的 解决方案 但感觉有点hacky-引入了额外的p标签，使用了left-left和display：table。也许有人可以建议一种更简单的方法。 问题答案： 在考虑了所有建议的选项之后，最干净的解决方案似乎是设置所有行的高度和垂直对齐： 参见 Jsfiddle演示 CSS：
-
结构是这样的：
-
问题内容： 我有一个包含文本的div元素，并且我想将此div的内容垂直居中对齐。 这是我的div样式： 做这个的最好方式是什么？ 问题答案： 您可以尝试以下基本方法： 但是，它仅适用于一行文本，因为我们将行的高度设置为与包含框元素相同的高度。 更通用的方法 这是垂直对齐文本的另一种方法。此解决方案适用于一行和多行文本，但仍需要一个固定高度的容器： CSS只是通过设置的line-height等于其高
-
假设我有一个bootstrap按钮，它有一个字体很棒的图标和一些文本： 如何使文本显示为垂直居中？文本现在与图标的底部边缘对齐:http://jsfidle.net/v7dlm/1/ 编辑：我有一个可能的解决方案:http://jsfidle.net/cldeg/1/但感觉有点怪--引入额外的p标记，使用拉左和display：table。也许有人可以建议一个更简单的方法。
-
问题内容： 我怎么能垂直居中内的？ 到目前为止，我的代码： 我已经尝试过“ top：50％”；和“ vertical-align：middle”；没有成功 编辑： 好的，所以已经讨论了很多。我也许已经开始了另一场小型的火焰战争。但是为了论证，那我该如何用一个表呢？到目前为止，我已经将CSS用于其他所有内容，所以这并不是说我没有尝试采用“良好做法”。 编辑： 内部div没有固定的高度 问题答案： 简