如果文本占用两行，如何垂直居中放置按钮中的文本？ [英] How to vertically center text in button if text takes up two lines?

问题描述

我怎样才能在一个具有指定宽度和高度的按钮中垂直居中多行文本？

 << ; a href =＃>这段文字将占用两行< / a> 
 
 a {
 display：inline-block 
 height：50px; 
 width：100px; 
 
  

解决方案使用 line-height ：

  a {line-height：50px; } 
  

这只适用于文本占用一行的情况。如果你必须处理多行，你可以使用 display：table-cell ：

  a {display：table-cell; vertical-align：middle; } 
  

How would I go about vertically centering multiple lines of text in a button that has a specified width and height?

<a href="#">This text will take up two lines</a>

a {
    display: inline-block
    height: 50px;
    width: 100px;
}

解决方案

Use line-height:

a { line-height: 50px; }

This only works if the text takes up one line. If you have to deal with mulitple lines, you could make use of display: table-cell:

a { display: table-cell; vertical-align: middle; }

这篇关于如果文本占用两行，如何垂直居中放置按钮中的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！