Html 如何创建两个堆叠的元素都居中对齐的？

到目前为止，我有：

HTML:

演示：

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

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

---

如何解决这些问题？

要使这些按钮顶部对齐，应设置垂直对齐：顶部，还应取消默认的：焦点轮廓，并查看以下其他部分的演示

钮扣{ 宽度：100px； 高度：40px； 背景：氟氯化碳； 边界：无； 边界半径：5px； 显示：内联块； 垂直对齐：顶部； 位置：相对位置； } 按钮跨度{ 显示：块； } 按钮：之后{ 内容：； 显示：块； 宽度：100%； 身高：100%； 位置：绝对位置； 左：0； 排名：0； } 按钮：焦点{ 大纲：0； } 按钮：激活{ 盒影：插入0 2px4p0 rgba0,0,0,0.35； } 按钮：活动：之后{ 背景：rgba0,0,0,0.15； } A线 b行 第X行

---

要使这些按钮顶部对齐，应设置垂直对齐：顶部，还应取消默认的：焦点轮廓，并查看其他部分的演示

钮扣{ 宽度：100px； 高度：40px； 背景：氟氯化碳； 边界：无； 边界半径：5px； 显示：内联块； 垂直对齐：顶部； 位置：相对位置； } 按钮跨度{ 显示：块； } 按钮：之后{ 内容：； 显示：块； 宽度：100%； 身高：100%； 位置：绝对位置； 左：0； 排名：0； } 按钮：焦点{ 大纲：0； } 按钮：激活{ 盒影：插入0 2px4p0 rgba0,0,0,0.35； } 按钮：活动：之后{ 背景：rgba0,0,0,0.15； } A线 b行 第X行

---

1要对齐按钮，请使用垂直对齐：顶部；在按钮选择器上

2要使文本居中，请将外部元素的宽度设置为宽度：100%

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

---

这里有一把小提琴：

1要对齐按钮，请使用垂直对齐：顶部；在按钮选择器上

2要使文本居中，请将外部元素的宽度设置为宽度：100%

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

---

这里有一把小提琴：

解决了这个问题：Jsfiddle

您的问题是，您将按钮显示为内联块，而它们应该显示为：内联以进行垂直对齐

垂直定线文件：

你也应该把按钮里面的对象浮动到左边，以便让它们堆叠起来

浮动的文件：

并将按钮：active.outter.outter更改为按钮：active

---

排序对齐问题时，不应使用width:inherit；改用宽度：100%

解决了这个问题：Jsfiddle

您的问题是，您将按钮显示为内联块，而它们应该显示为：内联以进行垂直对齐

垂直定线文件：

你也应该把按钮里面的对象浮动到左边，以便让它们堆叠起来

浮动的文件：

并将按钮：active.outter.outter更改为按钮：active

---

排序对齐问题时，不应使用width:inherit；改用宽度：100%

我不确定我是否理解你想要什么。像这样的

它有一个父容器，也许没有它也可以完成，但我认为这是最正确的方法

.集装箱{ 位置：绝对位置； 显示器：flex； 对齐项目：居中； 证明内容：中心； } .container>按钮{ 边界半径：5px； 边框：2倍实心透明； 保证金：5px 5px 5px 5px； 背景颜色：ocre； 颜色：棕色； 过渡：均为0.3秒； } .容器>按钮>跨度{ 显示：块； } .container>按钮：悬停{ 边框：2倍纯色灰色； 颜色：红色； } .container>按钮：焦点{ 边框颜色：黑色； 颜色：红色； 背景颜色：灰色； 盒影：5px 5px 10px 88888； 大纲：无； } A线 b行 第X行

---

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

它有一个父容器，也许没有它也可以完成，但我认为这是最正确的方法

康塔先生 内尔{ 位置：绝对位置； 显示器：flex； 对齐项目：居中； 证明内容：中心； } .container>按钮{ 边界半径：5px； 边框：2倍实心透明； 保证金：5px 5px 5px 5px； 背景颜色：ocre； 颜色：棕色； 过渡：均为0.3秒； } .容器>按钮>跨度{ 显示：块； } .container>按钮：悬停{ 边框：2倍纯色灰色； 颜色：红色； } .container>按钮：焦点{ 边框颜色：黑色； 颜色：红色； 背景颜色：灰色； 盒影：5px 5px 10px 88888； 大纲：无； } A线 b行 第X行

---

---

背景和阴影位不是很清楚，如果需要进一步调整，您可以留下评论。对于按钮对齐，我得出了相同的结论，但在button类中使用了vertical align:middle，但我有两个问题：a为什么我需要按钮本身的此属性，它们已经是内联的，他们为什么变得不结盟？如果所有按钮的按钮内有相同数量的s，则它们完全对齐。为什么我仍然需要垂直对齐？b在这种情况下，顶部和中间有区别吗？推荐的是什么？@RicardoAmaral我想我已经把它整理好了，再次看到更新的答案，还删除了不必要的html标记、类等，将所有内容都移动到css中。演示-这是一个很好的解决方案，但不幸的是，我不能使用内容，因为浏览器的最低要求。我已经用这个问题的多种解决方案解决了我的所有问题，所以谢谢你的意见。好吧，我仔细检查了一下，你说得对，我可以用它。。。我想我是被一位同事误解了，明天我必须向他澄清，我在你发表评论之前尝试caniuse时也误解了我的搜索结果。背景和阴影部分不是很清楚，如果需要进一步调整，你可以给你留言。对于按钮对齐，我也得出了同样的结论，但是在button类中使用了vertical align:middle，但是我有两个问题：a为什么我需要按钮本身的这个属性，它们已经是内联的，为什么它们变得不对齐？如果所有按钮的按钮内有相同数量的s，则它们完全对齐。为什么我仍然需要垂直对齐？b在这种情况下，顶部和中间有区别吗？推荐的是什么？@RicardoAmaral我想我已经把它整理好了，再次看到更新的答案，还删除了不必要的html标记、类等，将所有内容都移动到css中。演示-这是一个很好的解决方案，但不幸的是，我不能使用内容，因为浏览器的最低要求。我已经用这个问题的多种解决方案解决了我的所有问题，所以谢谢你的意见。好吧，我仔细检查了一下，你说得对，我可以用它。。。我想我是被一位同事误解了，明天我必须向他澄清，我在你发表评论之前尝试使用caniuse时也误解了我的搜索结果。很抱歉，但对我来说，它看起来没有修复。按钮之间仍然没有对齐，文本似乎没有完全对齐，并且活动状态不起作用。更新的活动状态将起到对齐和更新应答的作用抱歉，但对我来说仍然不太好。阴影应嵌入/位于内部，背景不会变为较暗的颜色。也许我没有弄清楚我想要实现什么…排序它使框阴影插入，看更新的提琴使用过滤器排序背景颜色，更新的完整答案应该是你希望的我很抱歉，但对我来说它看起来不是固定的。按钮之间仍然没有对齐，文本似乎没有完全对齐，并且活动状态不起作用。更新的活动状态将起到对齐和更新应答的作用抱歉，但对我来说仍然不太好。阴影应嵌入/位于内部，背景不会变为较暗的颜色。也许我没有明确我想要实现的目标。排序它制作了框阴影插图，查看更新的小提琴使用过滤器对背景颜色进行排序，更新的完整答案应该是你希望的1我有和我在另一条评论中写的相同的问题，为什么我需要它？按钮已经是内联的，如果所有按钮都有1个或2个跨距，为什么仅仅因为要对齐的按钮之间的跨距数不同而未对齐。文本没有完全对齐，有点偏右。。。3您正在用不透明度的黑色背景替换绿色背景色，这不是我想要的，我想要在绿色背景上加一个透明的黑色。@RicardoAmaral 1 2 3您可以在活动状态下使用背景图像：线性渐变来完成此操作：1谢谢。2我注意到它只在Chrome浏览器上工作，在Firefox主浏览器上不工作。3正是我想要的。太棒了\o/谢谢。@RicardoAmaral啊，我现在在FF中看到了。对于居中问题，将.outer上的宽度从inherit更改为100%，这也会使填充设置为on

---

按钮选择器是不必要的。嗯，.outer元素只是在那里为我尝试实现变暗的过滤效果，用你的线性梯度解决方案，我要删除这个outter span…1我有一个和我在另一条评论中写的相同的问题，为什么我需要它？按钮已经是内联的，如果所有按钮都有1个或2个跨距，为什么仅仅因为要对齐的按钮之间的跨距数不同而未对齐。文本没有完全对齐，有点偏右。。。3您正在用不透明度的黑色背景替换绿色背景色，这不是我想要的，我想要在绿色背景上加一个透明的黑色。@RicardoAmaral 1 2 3您可以在活动状态下使用背景图像：线性渐变来完成此操作：1谢谢。2我注意到它只在Chrome浏览器上工作，在Firefox主浏览器上不工作。3正是我想要的。太棒了\o/谢谢。@RicardoAmaral啊，我现在在FF中看到了。对于居中问题，将.outer上的宽度从inherit更改为100%，这也使得按钮选择器上的填充设置变得不必要。好吧，.outer元素只是为了让我尝试实现变暗的过滤效果，使用线性渐变解决方案，我将删除该outer跨度。。。

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

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

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