如何垂直对齐这个 span 元素？

Question

这应该很简单，如果重复，请见谅。我无法在跨度中获得一些文本以在图标旁边垂直对齐。

例子：

.box {
  width: 100px;
  text-align: center;
  background-color: #f0f0f0;
  margin: 50px auto;
  padding: 20px;
  font-family: sans-serif;
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
  <a>
    <span>Search</span>
    <i class="fa fa-search fa-2x" aria-hidden="true"></i>
  </a>
</div>

我试过的 CSS：

将跨度设置为display: inline-block 并分配填充和边距。这也会向上移动图标。

将链接设置为position: relative 并定位跨度。这会导致图标移动，因为跨度现在已从流中取出。

调整跨度的line-height。同样，这会影响图标。

浮动跨度。这行不通。

我有什么遗漏吗？我对flex不是很熟悉，这会是一个解决方案吗？ （注意我必须支持非常旧的浏览器...）

非常感谢您的建议！

Answer 1

添加以下css：

.box a i,
.box a span {
  display: inline-block;
  vertical-align: middle;
}

.box {
  width: 100px;
  text-align: center;
  background-color: #f0f0f0;
  margin: 50px auto;
  padding: 20px;
  font-family: sans-serif;
  cursor: pointer;
}

.box a i,
.box a span {
  display: inline-block;
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
  <a>
    <span>Search</span>
    <i class="fa fa-search fa-2x" aria-hidden="true"></i>
  </a>
</div>

Answer 2

给<i> 一个id（或类，我将它命名为#k），然后添加这个规则集：

  #k { vertical-align: middle; }

.box {
  width: 100px;
  text-align: center;
  background-color: #f0f0f0;
  margin: 50px auto;
  padding: 20px;
  font-family: sans-serif;
  cursor: pointer;
}
#k {
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
  <a href='#/'>
    <span>Search</span>
    <i id='k' class="fa fa-search fa-2x" aria-hidden="true"></i>

  </a>
</div>

Answer 3

使用 CSS 弹性盒。将display: flex 属性应用于.box a 并使用align-items: center（这将使您的项目垂直居中对齐）。

看看下面的sn-p：

.box {
  width: 30%;
  text-align: center;
  background-color: #f0f0f0;
  margin: 50px auto;
  padding: 20px;
  font-family: sans-serif;
  cursor: pointer;
}

.box a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box a span {
  padding-right: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
  <a>
    <span>Search</span>
    <i class="fa fa-search fa-2x" aria-hidden="true"></i>
  </a>
</div>

希望这会有所帮助！

Answer 4

如果您首先将其设置为块元素，然后应用浮动元素，则可以轻松调整 span 中文本的位置。完成后，您可以像最初提到的那样应用line-height，但不会影响图标。

这里有一个 JSFiddle 来展示要做什么。难以置信的简单，而且你不必碰你原来的 CSS：https://jsfiddle.net/pgkjaa8c/

使用浮点数的解决方案

.box span {
  display: block;
  float: left;
  line-height: 40px;
}

如果你想要右边的文本，你可以从左到右改变浮动。此外，如果您愿意，可以应用左右填充将文本推离图标：https://jsfiddle.net/rz4y4696/

.box span {
  padding-left: 15px;
  display: block;
  float: right;
  line-height: 40px;
}

另外，我建议不要使用 flex。人们一直在推动 flex 作为一种解决方案，但它消除了许多旧版浏览器的支持。这将是一种更传统的实现方式，具有完全跨浏览器和旧版浏览器支持。

---

不使用浮点数的解决方案

如果您想要一个不需要浮动且适用于不同宽度的解决方案，那么您必须删除<i> 标记并将FontAwesome 图标添加到您的CSS。你可以在这里看到解决方案：https://jsfiddle.net/rwkypte8/2/

您可以在此处获取 FontAwesome 搜索图标的值：http://fontawesome.io/icon/search/

HTML 和 CSS 如下：

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
  <a>
    <span>Search</span>
  </a>
</div>

CSS

.box {
  width: 50%;
  text-align: center;
  background-color: #f0f0f0;
  margin: 50px auto;
  padding: 20px;
  font-family: sans-serif;
  cursor: pointer;
}
.box span {
  display: block;
  line-height: 40px;
  text-align: center;
}
.box span:after {
  padding-left: 20px;
  font-family: 'FontAwesome';
  font-size: 30px;
  content: '\f002';
}