垂直对齐:按钮中的文本中间
Posted
技术标签:
【中文标题】垂直对齐:按钮中的文本中间【英文标题】:vertical-align:middle for text in button 【发布时间】:2012-12-03 19:20:10 【问题描述】:我有这个布局:
我的 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;
width: 132px;
padding: 0 25px;
font-size: 16px;
text-align: center;
font-weight: bold;
margin-left: 4px;
display: block;
float: left;
当按钮有 1 行文本时,我的代码运行良好。但是当按钮有 2 行文本时,如上图所示。代码文本的高度很大,因为我使用了line-height
属性。我试过vertical-align
,但它不起作用。
请参阅jsfiddle。
【问题讨论】:
【参考方案1】:另一种方法是使用flexible boxes:
a
display: inline-flex;
align-items: center; /* cross axis */
justify-content: center; /* main axis */
line-height: 1; /* reset */
您可能需要添加前缀,请参阅browser support 和fiddle。
【讨论】:
【参考方案2】:垂直对齐仅影响显示为表格单元格(或内联块,但对后面的效果不同)的元素。这些元素不能浮动。
a
display: table-cell;
vertical-align: middle;
/* Reset */
float: none;
line-height: normal;
【讨论】:
@Ozerich 表格单元格没有边距。您可以改用透明边框。以上是关于垂直对齐:按钮中的文本中间的主要内容,如果未能解决你的问题,请参考以下文章