锚点（<a>标签）中文本垂直居中对齐

Question

Sample demo: JSFiddle

<h3><a class="myButton" href="#">Tell Me More &nbsp;&nbsp;<i class="fa fa-chevron-circle-right fa-2x"></i></a></h3>

如您在我的JSFiddle中所见，文本“Tell Me More”未垂直居中对齐。

我该如何实现呢？

- Unknownymous

---

你在顶部和底部都有6像素的填充，但两个元素的高度不同，一个快速解决方法是在文本容器（例如该示例中的锚标签）上放置与右侧图标高度相同的行高。这将使文本垂直居中。http://jsfiddle.net/ES225/4/ - youssef

可能是在内联块锚标签上垂直居中的重复问题。 - Brian Mains

Answer 1

在这种情况下，您应该使用新的CSS 3功能，例如Flexbox。

a,button {
  -moz-box-sizing: border-box;
  width: 150px;
  height: 150px;
  display: flex; /* CSS3 */
  align-items: center; /* Vertical align */
  justify-content: center; /* Horizontal align */
  border: 1px solid #000;
}

<a href="#"><span>Testing 1,2,3</span></a>
    <button><span>Testing 1,2,3</span></button>

这就是它的简单之处。

所有浏览器都支持它。请参见 caniuse.com/#search=flex。

另外，请查看免费优秀的课程 flexbox.io/。他是最好的老师。

还要看一下 css-grid，也是 CSS 3 中的新内容。

- John Balvin Arias

---

一旦文本换行，它将在此示例中左对齐。 - martinoss

Answer 2

演示 Fiddle

添加以下 CSS 内容：

.fa
{
   vertical-align: middle;
}

- Karuppiah RK

---

谢谢，它可以工作。但是它不允许我在myButton类选择器上添加MARGIN-TOP。我的意思是MARGIN-TOP不起作用。 - Unknownymous

@Unknownymous：我已经在我的第二个小提琴上更新了一些代码。请查看上面的小提琴。现在margin-top将正常工作...带有margin-top的链接http://jsfiddle.net/ES225/8/，不带margin-top的链接http://jsfiddle.net/ES225/10/。 - Karuppiah RK

Answer 3

.myButton {
    display: inline-block;
    vertical-align: middle;
}

.fa {
    vertical-align: middle;
}

哦抱歉，现在即使您将它们应用于.myButton，margin也会起作用。

- pulamc