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

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.

Also you are using elements with the same id in your HTML. I know this is an example, but I hope you aren't doing that in your HTML. Every ID needs to be unique. Generally speaking ids aren't for styling. HTML5 has very synamtic markup for things like header,footer,main, content, etc. — Leeish, Jul 15 '15 at 22:18
Also depending on the complexity of what you are doing, http://www.smashingmagazine.com/2015/07/14/quantity-ordering-with-css/ — Leeish, Jul 15 '15 at 22:19
woops, the same id was just an oversight when making the demo, my bad. — AlbatrossCafe, Jul 15 '15 at 22:21
See my updated [answer](http://stackoverflow.com/a/31442171/483779) @AlbatrossCafe with more info, especially the additional suggestions regarding to the middle div position. — Stickers, Jul 15 '15 at 23:09

Stickers · Answer 1 · 2015-07-15T23:06:44.970

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.

score 3 · Answer 2 · answered Jul 15 '15 at 22:17

3

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

answered Jul 15 '15 at 22:17

Leeish

5,203
2
17
45

Sorry, I guess I should specify that I don't want a ton of margin between each button if there is 2 (they should still be right next to each other with ~2px between them). I'll update the question – AlbatrossCafe Jul 15 '15 at 22:23
1

Ah, then @Pangloss has the better answer for what you want. I wasn't sure what you meant by centered. – Leeish Jul 15 '15 at 22:47

Chrillewoodz · Answer 3 · 2015-07-15T22:27:02.267

1

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/

edited Jul 15 '15 at 22:27

answered Jul 15 '15 at 22:19

Chrillewoodz

27,055
21
92
175

I thought I tried this and it didn't work. Can you update the fiddle? – AlbatrossCafe Jul 15 '15 at 22:22

score 1 · Answer 4 · answered Jul 15 '15 at 22:24

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

score 1 · Accepted Answer · answered Jul 15 '15 at 22:34

1

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/

answered Jul 15 '15 at 22:34

Ray Waldin

3,217
1
16
14

yeah, it was just an oversight when I was quickly drafting the example fiddle. thanks for this answer - it required the least amount of modification and achieves the goal exactly how I envisioned. – AlbatrossCafe Jul 15 '15 at 22:45

score 0 · Answer 6 · edited May 23 '17 at 12:06

0

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.

edited May 23 '17 at 12:06

Community

1
1

answered Jul 15 '15 at 22:21

hkk

2,069
1
23
48

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

6 Answers6