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，以便{1}个带有1个或2个按钮的元素显示div中居的按钮？

请参阅小提琴： https://jsfiddle.net/bf33wc6w/1/

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

Answer 1

您可以在项目上设置内联块，并将容器设置为文本对齐中心。

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

<强>更新

修复了在一个页面上多次使用相同的ID（有效的HTML） - 将其更改为类。

改进中间块的位置，使其始终更准确地保持在中间 - 使用CSS transform。

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

Answer 2

像这样：https://jsfiddle.net/bf33wc6w/7/

我所做的只是将你的浮动更改为无，并将左边距和右边距的边距更改为<？p>

.control-button {
    background-color: #0E80B4;
    color: white;
    outline: none;
    border: none;
    height: 73px;
    width: 128px;
    margin: 3px auto;
}

Answer 3

对于没有3个项目的容器，您应该删除其中按钮的float: left;。留下3件物品。然后你可以在容器上设置text-align: center;。

您可以在要控制的容器上添加类似no-float的类，以确定其子项是否应该浮动。

https://jsfiddle.net/bf33wc6w/10/

Answer 4

尝试这样的事情：

<div id="control-buttons-container">
    <div class="col-1">
        <button class="control-button">some button text</button>
    </div>
    <div class="col-2">
        <button class="control-button">proceed with this button</button>
    </div>
    <div class="col-3">
        <button class="control-button">Seth Rollins, WWE Champion</button>
    </div>
</div>    

<div id="control-buttons-container">
    <div class="col-1">
    </div>
    <div class="col-2">
        <button class="control-button">proceed with this button</button>
    </div>
    <div class="col-3">
    </div>
</div>    




.control-button {
    background-color: #0E80B4;
    color: white;
    outline: none;
    border: none;
    float: left;
    height: 73px;
    width: 100%;
}
.control-button:hover {
    background-color: #3FA9DB;
}
#control-buttons-container {
    max-width: 400px;
    padding: 1px; 
    border: 1px solid red;
}
.col-1, .col-2, .col-3 {
    width: 32.6%;
    display: inline-block;
    margin: auto
}

不是完美的，但它是在几分钟内完成并完成工作的：JSFiddle

Answer 5

添加以下样式规则：

#head, #body, #foot { text-align: center; }
#control-buttons-container { display: inline-block; }

顺便说一句，你不应该在一个文档中多次使用相同的id（控制按钮 - 容器）。您应该使用类名。

更新了小提琴：https://jsfiddle.net/mr8e7kyt/

Answer 6

This answer可能会帮助你。将按钮包裹在容器中，赋予其固定宽度，然后将margin更改为auto。请务必删除float: left。

如何将这些不同数量的元素集中在div中？

6 个答案: