示例演示:JSFiddle
<h3><a class="myButton" href="#">Tell Me More <i class="fa fa-chevron-circle-right fa-2x"></i></a></h3>
如您在我的 JSFiddle 中所见,Tell Me More 文本未垂直居中对齐。
我该怎么做?
最佳答案
您应该使用新的 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 .
另请查看免费的优秀类(class) flexbox.io/ .他是这方面最好的老师。
另请查看 css-grid ,也是 CSS 3 中的新内容。
关于css - anchor (<a>) 标记内的文本垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23382995/