如何创建一个 <button>，其中两个堆叠的 <span> 元素都居中对齐？

Question

到目前为止我有这个：

HTML:

<button>
    <span class="outter">
        <span class="inner">Line A</span>
        <span class="inner">Line b</span>
    </span>
</button>

<button>
    <span class="outter">
        <span class="inner">Line X</span>
    </span>
</button>

CSS:

* {
    box-sizing: border-box;
}

button {
    width: 100px;
    height: 40px;
    background-color: #CCFFCC;
    border: none;
    overflow: hidden;
    border-radius: 5px;
}

button .outter {
    display: inline-block;
    width: inherit;
}

button:active .outter {
    background-color: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.35);
}

button .inner {
    display: inline-block;
    width: inherit;
}

演示： http://jsfiddle.net/Lb3htfmx/2/

但是正如您在演示中看到的那样，这有很多问题。这是我希望此按钮的行为方式：

按钮之间需要对齐，最好不要使用父容器。我不知道为什么第二个按钮下降了一点，因为它们是内联元素。
文本未正确居中对齐。我也不知道为什么会这样。如果单击该按钮，您会更清楚地看到问题。
当你点击按钮时，我想要一个阴影并且整个按钮背景更暗。我想避免指定不透明的深色，我真的想使用某种变暗滤镜（类似于我所做的）。

我该如何解决这些问题？

Answer 1

要让这些按钮顶部对齐，您应该设置 vertical-align:top，您还应该去掉默认的 :focus 轮廓，其他部分请参见下面的演示。

button {
    width: 100px;
    height: 40px;
    background: #cfc;
    border: none;
    border-radius: 5px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}
button span {
    display: block;
}
button:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
button:focus {
    outline: 0;
}
button:active {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.35);
}
button:active:after {
    background: rgba(0, 0, 0, 0.15);
}

<button>
    <span>Line A</span>
    <span>Line b</span>
</button>

<button>
    <span>Line X</span>
</button>

Fiddle 演示： http://jsfiddle.net/3vh6cuns/

Answer 2

1) 要对齐按钮，请使用按钮选择器上的 vertical-align: top;。

2) 要使文本居中，请将 .outer 元素的宽度设置为 width:100%;。

3) 要使阴影背景覆盖整个按钮，请将选择器从 button:active .outter {...} 更改为 button:active {...}。

这是一个fiddle：http://jsfiddle.net/cmd3nbz0/

Answer 3

解决了问题：Jsfiddle here

您的问题是您将按钮显示为 inline-block，而对于垂直对齐，按钮应显示为 display:inline。

垂直对齐的文档here:

并且您还应该 float 按钮内的对象离开，以便将它们 "stack"

浮动文档here：

并将 button:active .outter .outter 更改为 button:active

button:active {
  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow: inset 0px 1px 5000px rgba(0,0,0,0.8);
}

解决了对齐问题，您不应该使用 width:inherit; 而是使用 width:100%;

Answer 4

我不确定我明白你想要什么。是这样的吗？

JS Fiddle

它有一个父容器，也许没有它也可以完成，但我认为这是最 "Correct" 的方式。

.container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container > button {
    border-radius: 5px;
    border: 2px solid transparent;
    margin: 5px 5px 5px 5px;
    background-color: ocre;
    color: brown;
    transition: all 0.3s;
}
.container > button > span {
    display: block;
}
.container > button:hover {
    border: 2px solid gray;
    color: red;
}
.container > button:focus {
    border-color: black;
    color: red;
    background-color: gray;
    box-shadow: 5px 5px 10px #888888;
    outline: none;
}

<div class="container">
    <button>
        <span class="inner">Line A</span>
        <span class="inner">Line b</span>
    </button>
    <button> 
        <span class="inner">Line X</span>
    </button>
</div>

Answer 5

那些在 2021 年尝试这样做的人可能更喜欢在按钮上贴上“display: flex”，将子 span 元素放在按钮元素内（我现在才意识到你可以这样做）然后弄乱 Flexbox 设置直到合身刚刚好。

如何创建一个 <button>，其中两个堆叠的 <span> 元素都居中对齐？

How to create a <button> with two stacked <span> elements all center aligned?

html

css

button