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

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;
}

在完成所有更改后，我得到了这些结果：

在垂直方面，它位于中间（短文本和长文本） - O.K，但在水平方向上为短文本从左侧开始

问题是display: table-cell将它浮动到左侧以获得短文本！ 如何创建这些按钮，即使我有一个单词或一个长文本，它们都会从水平和垂直按钮的中间开始？

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