垂直对齐:按钮中的文本中间

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 表格单元格没有边距。您可以改用透明边框。

以上是关于垂直对齐:按钮中的文本中间的主要内容,如果未能解决你的问题,请参考以下文章

导航菜单中的文本未在中间垂直对齐[关闭]

scss 图标垂直对齐按钮中的文本

按钮标签和与动态内容的垂直对齐

CSS中SVG的垂直对齐

文本如何在 div 中垂直对齐中间

如何垂直对齐浮动图像中的替代文本?