我需要链接和按钮看起来一样,但是我无法以"按钮"标签的方式垂直对齐"a"标签内的文本.重要的是要注意标签需要能够处理多行文本(因此行高不起作用).
a,button {
display: inline-block;
-moz-box-sizing: border-box;
width: 150px;
height: 150px;
vertical-align: middle;
border: 1px solid #000;
text-align: center;
}
Run Code Online (Sandbox Code Playgroud)
请参阅下面的jsfiddle:
正如您所看到的,我可以使用内部的span标签和将"display:table"设置为"a"并将"display:table-cell"和"vertical-align:middle"设置为span,但这在IE7中不起作用.
a,button {
width: 150px;
height: 150px;
border: 1px solid #000;
text-align: center;
}
a {
display: table;
-moz-box-sizing: border-box;
}
a span, button span {
vertical-align: middle;
text-align: center;
}
a span {
display: table-cell;
}
Run Code Online (Sandbox Code Playgroud)
寻找一个简单的CSS解决方案.