html - 我怎样才能将这些不同数量的元素集中在一个 div 中？

Question

我有一个 <div>带有许多子元素(恰好是自定义大小的按钮)。它可以有 1 到 3 个按钮。

带有 2 个按钮的 HTML 示例:

<div id="head">
    <div id="control-buttons-container">
        <button class="control-button">some button text</button>
        <button class="control-button">proceed with this button</button>
    </div>    
</div>

当有3个按钮时，它们会填满整个<div> , 所以这不是问题。但是，当有 1 个或 2 个按钮时，它们需要居中，但如果不引入可笑的条件边距或其他东西，我似乎无法实现这一点。

如何修改此 CSS 以便 <div>具有 1 个或 2 个这些按钮的元素显示按钮在 div 中居中？

请引用 fiddle : https://jsfiddle.net/bf33wc6w/1/

编辑:只有 2 个按钮，我不希望它们散开。我希望它们位于中心，它们之间只有 ~2px，类似于它们在有 3 个按钮时的间距。

Answer 1

您可以在元素上设置内联 block ，容器设置为文本居中对齐。

.control-buttons-container {
    text-align: center;
    font-size: 0; /*fix inline block gap*/
}
.control-button {
    display: inline-block;
    vertical-align: top;
    font-size: 12px; /*reset font size*/
}

JSFIDDLE DEMO

.control-buttons-container {
    text-align: center;
    font-size: 0; /*fix inline block gap*/
}
.control-button {
    background-color: #0E80B4;
    color: white;
    outline: none;
    height: 73px;
    width: 128px;
    margin: 3px 1.5px;
    display: inline-block;
    vertical-align: top;
    font-size: 12px; /*reset font size*/
}
.control-button:hover {
    background-color: #3FA9DB;
}
#head, #body, #foot {
    border: 1px solid red;
    position: absolute;
    width: 396px;
    height: 80px;
    left: 0;
}
#head {
    top: 0;
}
#body {
    bottom: 50%;
    -ms-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}
#foot {
    bottom: 0;
}

<div id="head">
    <div class="control-buttons-container">
        <button class="control-button">some button text</button>
        <button class="control-button">proceed with this button</button>
        <button class="control-button">Seth Rollins, WWE Champion</button>
    </div>
</div>
<div id="body">
    <div class="control-buttons-container">
        <button class="control-button">proceed with this button</button>
        <button class="control-button">Seth Rollins, WWE Champion</button>
    </div>
</div>
<div id="foot">
    <div class="control-buttons-container">
        <button class="control-button">Seth Rollins, WWE Champion</button>
    </div>
</div>

更新:

1. 修复了同一 id 在有效 HTML 中的单个页面上多次使用的问题 - 将其更改为类。

2. 改进了中间 block 的位置，使其始终更准确地位于中间 - 通过使用 CSS transform。

3. 合并了一些重复的 CSS 规则。