javascript - 按钮的文本垂直和水平对齐问题

Question

我有一些按钮里面有文字。我想要做的是将它们从垂直和水平方向对齐到中间。在这个例子中我有 3 个按钮(左边的按钮更大)

当它是一个长文本时，它被放置在按钮中间的一些行上 - 它不是从垂直中间开始但看起来不错，但是当我得到短文本时它(“oneWord”)然后附加到顶部一切看起来都很乱。

我读了一些例子:

How do I vertically align something inside a span tag? Button's text vertical align

How do I vertically align something inside a span tag?

vertical-align:middle for text in button

在这一切之后，我将我的风格设置为:

.spanContainer {
    height: 70px;
}

.spanContainer span {
    height: 70px;
    display: table-cell;
    vertical-align: middle;
    white-space: normal;
}

在所有更改之后，我得到了这些结果:

在垂直方向上，它位于中间(短文本和长文本)- 没问题，但在水平方向上，对于短文本，它从左侧开始

问题是 display: table-cell 将它 float 到左侧以显示短文本! 我怎样才能创建这些按钮，即使我有一个单词或一个长文本，它们也会从水平和垂直方向的按钮中间开始？

Answer 1

试试下面的代码片段

CSS

.spanContainer {
    height: 70px;
    display: table;
    width: 200px;
}

.spanContainer span {
    background-color: #ff0000;
    display: table-cell;
    text-align: center;
    vertical-align: middle;  
} 

或者不使用width在 spanContainer , 使用一些 padding在内span相反

.spanContainer {
    height: 70px;
    display: table;
}

.spanContainer span {
    background-color: #ff0000;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 0px 20px 0px 20px; 
} 

HTML

<span class="spanContainer">
  <span>something</span>
</span>

First solution | Second solution