How can I center these varied number of elements within a div? - html

Question

I have a <div> with a number of sub-elements (which happen to be custom-sized buttons). It can have between 1 and 3 buttons.
Example of HTML with 2 buttons:
<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>
When there are 3 buttons, they fill the entire <div>, so it is not an issue. However, when there are 1 or 2 buttons, they need to be centered but I can't seem to accomplish this without introducing ridiculous conditional margins or something.
How can I modify this CSS so that <div> elements with 1 or 2 of these buttons show the buttons centered within the div?
Please refer to the Fiddle: https://jsfiddle.net/bf33wc6w/1/
Edit: With only 2 buttons, I don't want them to be spread out. I want them to be in the center with only ~2px between them similar to their spacing for when there are 3 buttons.

Answer 1

You could set inline block on the items, with container set to text align center.
.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>
Updates:
Fixed same id being used multiple times on a single page, which is in valid HTML - changed it to class.
Improved the position of middle block, make it to always stay in the middle more accurately - by using CSS transform.
Merged some duplicated CSS rules.

Answer 2

Like this:https://jsfiddle.net/bf33wc6w/7/
All I did was change your float to none and the margin to auto for the left and right margin?
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
border: none;
height: 73px;
width: 128px;
margin: 3px auto;
}

Answer 3

Add these style rules:
#head, #body, #foot { text-align: center; }
#control-buttons-container { display: inline-block; }
As an aside, you shouldn't use the same id (control-buttons-container) multiple times in one document. You should use a classname instead.
Updated fiddle: https://jsfiddle.net/mr8e7kyt/

Answer 4

Try something like this:
<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
}
Isn't flawless, but it was made in a couple of minutes and gets the job done: JSFiddle

Answer 5

For the containers without 3 items you should remove the float: left; for the buttons inside it. Leave it for the one with 3 items. Then you can just set text-align: center; on the container.
You can add a class like no-float on the containers you want to control whether its children should be floated or not.
https://jsfiddle.net/bf33wc6w/10/

Answer 6

This answer will probably help you out. Wrap your buttons in a container, give it a fixed width, and change margin to auto. Be sure to remove float: left.