How can I center the following boxes using CSS

Question

I am trying to center the boxes horizontally. Currently they are aligned to the left and when you resize the window they move responsively. I would still like to keep that functionality. I just want to center the boxes even when I resize the window. I tried float:center but there is no such thing...Thank you.

http://jsfiddle.net/9BB36/9/

.mybtn {
font:bold 20px"Arial Black", Gadget, sans-serif;
font-style:normal;
color:#ffd324;

background-color: rgba(255,0,0,.90);
border:2px solid #000;
text-shadow:0px -1px 1px #222222;
box-shadow:0px 0px 12px #2e2300;
-moz-box-shadow:0px 0px 12px #2e2300;
-webkit-box-shadow:0px 0px 12px #2e2300;
border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
width:100px;
height:100px;
margin:5px;
float:left;
position:relative;
}

And the HTML

<div class="mybtn">

</div>

<div class="mybtn">

</div>

<div class="mybtn">

</div>

<div class="mybtn">

</div>

<div class="mybtn">

</div>

No, I don't mean vertically. If you extend your window far enough you will see that the boxes are aligned to the left...and there is much more space on the right side — user1142130, Jul 22 '14 at 20:45

score 3 · Accepted Answer · answered Jul 22 '14 at 20:43

3

You could wrap them in a div, apply text-align:center to it, then remove the float on the .mybtn divs and change the display to inline-block.

#wrapper {
    text-align:center;
}

jsFiddle example

answered Jul 22 '14 at 20:43

j08691

204,283
31
260
272

That's exactly what I'm looking for. Is there any other way to do it besides putting them inside a div wrapper? Thanks – user1142130 Jul 22 '14 at 20:47
Yes if they are only thing on the page use `body { text-align: center; }` – Milan and Friends Jul 22 '14 at 20:48
These buttons need to reside somewhere in your layout. The centering will be with respect to the containing block. – Marc Audet Jul 22 '14 at 20:48

Darrell · Answer 2 · 2014-07-22T20:57:56.867

As j08691 said:

You could wrap them in a div, apply text-align:center to it, then remove the float on the .mybtn divs and change the display to inline-block but rather than using a <div> use <section> tag as the <div> tag should be avoided in HTML5, when referring to a "section" of the page.

So the new code would look like:

HTML:

<section>
    <div class="transparent-btn"></div>
    <div class="transparent-btn"></div>
    <div class="transparent-btn"></div>
    <div class="transparent-btn"></div>
    <div class="transparent-btn"></div>
</section>

CSS:

section {
    text-align: auto;
}

.transparent-btn {
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    display: inline;
    background-color: rgba(255,0,0,.90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    box-shadow:0px 0px 12px #2e2300;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    border-radius:15px 15px 15px 15px;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;


    margin:5px;
    position:relative;


}

How can I center the following boxes using CSS

2 Answers2