Aligning 4 DIVs to the center of a page

Question

I've a page of content with 4 div's side by side.

At the moment the divs are sticking to the left.

I've tried to wrap the div's in a container and text-align that center, but it won't work.

here is the code i'm using i've remove some image URL's etc

#downloads {
  text-align: center!important;
}

.dl-buttons {
  text-align: center!important;
}

- I know this is duplicate but was testing .windows a {
  width: 190px;
  height: 190px;
  display: inline-block;
  float: left;
}

<div id="downloads">
  <div class="row dl-buttons">
    <div class="col-3 col-6-sx windows">
      <a class="bt1" href="#"></a>
    </div>
    <div class="col-3 col-6-sx mac">
      <a class="bt1" href="#"></a>
    </div>
    <div class="col-3 col-6-sx android">
      <a class="bt1" href="#"></a>
    </div>
    <div class="col-3 col-6-sx ios">
      <a class="bt1" href="#"></a>
    </div>
  </div>
</div>

all other classes / mac / android / ios are the same

Possible duplicate of [How to horizontally center two divs within a header div?](https://stackoverflow.com/questions/11582226/how-to-horizontally-center-two-divs-within-a-header-div) — Rob, May 30 '17 at 10:46

score 0 · Accepted Answer · answered May 30 '17 at 10:38

0

.dl-buttons{
    width: 100%;
    text-align: center;
}

.dl-buttons > div {
    width: auto;
    display: inline-block;
}

answered May 30 '17 at 10:38

Autista_z

2,491
15
25

score 0 · Answer 2 · answered May 30 '17 at 10:40

0

Use inline-block for the col-3 elements. Fiddle here

answered May 30 '17 at 10:40

Gerard

15,418
5
30
52

score 0 · Answer 3 · answered May 30 '17 at 10:42

Below is a small working code for you.

.dl-buttons {
  width: 100%;
  text-align: center;
}

.dl-buttons>div {
  width: auto;
  display: inline-block;
}

<div id="downloads">
  <div class="row dl-buttons">
    <div class="col-3 col-6-sx windows">
      <a class="bt1" href="#">s</a>
    </div>
    <div class="col-3 col-6-sx mac">
      <a class="bt1" href="#">a</a>
    </div>
    <div class="col-3 col-6-sx android">
      <a class="bt1" href="#">f</a>
    </div>
    <div class="col-3 col-6-sx ios">
      <a class="bt1" href="#">e</a>
    </div>
  </div>
</div>

Aligning 4 DIVs to the center of a page

3 Answers3