Button的文本垂直和水平对齐问题

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 将它浮动到左侧以显示短文本！ 如何创建这些按钮，即使我有一个单词或长文本，它们都将从水平和垂直按钮的中间开始？

Answer 1

试试下面的sn-p

CSS

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

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

或者不要在spanContainer上使用width，而是在内部span上使用一些padding

.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