<a> tag</a>内的文字垂直对齐

时间:2014-04-30 08:16:17

标签: css vertical-alignment text-align

示例演示:JSFIDDLE

正如您在 JSFIDDLE 中看到的那样。文字 TELL ME MORE 不是垂直对齐中心。

我该怎么做?

3 个答案:

答案 0 :(得分:8)

Demo Fiddle

添加此css

.fa
{
   vertical-align: middle;
}

答案 1 :(得分:4)

您应该使用新的CSS3功能,在本例中为flexbox

&#13;
&#13;
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;
}
&#13;
<a href="#"><span>Testing 1,2,3</span></a>
    <button><span>Testing 1,2,3</span></button>
&#13;
&#13;
&#13;

就这么简单

随意使用,所有浏览器都支持caniuse.com/#search=flex

同时查看免费且优秀的课程flexbox.io/他是本课程中最好的老师

同时查看css-grid,也是CSS3中的新内容

答案 2 :(得分:1)

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

.fa{
vertical-align:middle;
}

对不起,即使你将保证金应用到.myButton

,现在保证金仍然有效