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 Flexbox 。将display: flex属性应用于.box a并使用align-items: center（这会使您的项目垂直居中对齐）。

请看下面的代码段：

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

使用Floats的解决方案

.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作为解决方案，但它消除了许多传统浏览器的支持。这将是更传统的实现方式之一，具有完全跨浏览器和传统浏览器支持。

不使用Floats的解决方案

如果您想要一个不需要浮动的解决方案，并且可以使用不同的宽度，那么您必须删除<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';
}

如何垂直对齐此span元素？

4 个答案: