Button 垂直对齐:中对齐按钮中的文本
我有这样的布局: 我的CSS:Button 垂直对齐:中对齐按钮中的文本,button,vertical-alignment,css,Button,Vertical Alignment,Css,我有这样的布局: 我的CSS: body { background: #e2eaed; } a { text-decoration: none; color: #fff; font-size: 30px; height: 62px; line-height: 62px; /* vertical-align: middle is not works */ background: #8dc73f; widt
body {
background: #e2eaed;
}
a {
text-decoration: none;
color: #fff;
font-size: 30px;
height: 62px;
line-height: 62px;
/* vertical-align: middle is not works */
background: #8dc73f;
width: 132px;
padding: 0 25px;
font-size: 16px;
text-align: center;
font-weight: bold;
margin-left: 4px;
display: block;
float: left;
}
当按钮有一行文字时,我的代码运行良好。但当按钮有两行文字时,如上图所示。代码文本有很大的高度,因为我使用了行高度
属性。我尝试了垂直对齐,但它不起作用
请参阅。垂直对齐仅影响显示为表格单元格(或内联块)的元素,但对后面的效果不同。这些要素不得浮动
a {
display: table-cell;
vertical-align: middle;
/* Reset */
float: none;
line-height: normal;
}
另一种方法是使用:
您可能需要添加前缀,请参阅和。@Ozerich表格单元格没有边距。您可以改用透明边框。
a {
display: inline-flex;
align-items: center; /* cross axis */
justify-content: center; /* main axis */
line-height: 1; /* reset */
}