时间戳

首页 > 解决方案 > 使图标大于文本，但仍然垂直居中

html - 使图标大于文本，但仍然垂直居中

问题描述

我正在寻找实现这张照片的按钮，但我不知道如何将图标与文本对齐？

在此处输入图像描述

当前代码：

.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>

我知道这很混乱，真的很晚了，我只想让这个简单的东西正常工作！

标签： htmlcss

解决方案

您可以使用CSS 选择器简单地添加vertical-align: middle到按钮内的所有元素/内容：.btn *

.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>

推荐阅读