CSS
square

Question

I'am new into basics of HTML and CSS.

Trying to create 3 x 3 square "picture", using , but can't find simple solution to put squares in the middle of the page, like nine square in center.
How to put all squares in the big bordered square?

How can we achieve this?

HTML:

<body>  
    <div class="square-one">
    </div>

    <div class="square-two">
    </div>

    <div class="square-three">
    </div>

    <div class="square-four">
    </div>

    <div class="square-five">
    </div>

    <div class="square-six">
    </div>

    <div class="square-seven">
    </div>

    <div class="square-eight">
    </div>

    <div class="square-nine">
    </div>
</body>

CSS:

body {
    background-color: #000000;
    font-size: 150px;
}

div {
    background: #FFFFFF;
    width: 275px;
    height: 275px;
    margin: 10px 10px 10px 10px;
    float: left;
}

Try setting the body left and right margin properties to auto. This usually centres things. Apology if this is not right in your case. The div position and flow are important too but over my head. There are good tutorials out there. — Andrew Truckle, May 21 '16 at 07:49
Also consider wording your question more informatively. It is rather vague. — Andrew Truckle, May 21 '16 at 07:51
looks similar to http://stackoverflow.com/questions/37105579/responsive-grid-of-squares-within-a-responsive-grid-of-squares/37105929 — G-Cyrillus, May 21 '16 at 14:16

score 1 · Accepted Answer · answered May 21 '16 at 08:10

Read about display: inline-block CSS property. I think you wants to get the following layout.

body {
    background-color: #000;
    font-size: 150px;
    text-align: center;
}

.square-holder {
    border: 1px solid #fff;
    display: inline-block;
    vertical-align: top;
    letter-spacing: -4px;
    width: 285px;
    font-size: 0;
}

.square {
    background: #fff;
    letter-spacing: 0;
    font-size: 150px;
    width: 75px;
    height: 75px;
    margin: 10px;
    display: inline-block;
    vertical-align: top;
}

<body>
  <div class="square-holder">
    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>
  </div>
</body>

score 0 · Answer 2 · answered May 21 '16 at 07:58

Use text-align - CSS with display - CSS

body {
  background-color: #000000;
  font-size: 150px;
  text-align: center /* add this */
}
div {
  background: #FFFFFF;
  width: 25px;
  height: 25px;
  margin: 10px;
  /*float: left; */
  display: inline-block/* add this */
}

<div class="square-one">
</div>

<div class="square-two">
</div>

<div class="square-three">
</div>

<div class="square-four">
</div>

<div class="square-five">
</div>

<div class="square-six">
</div>

<div class="square-seven">
</div>

<div class="square-eight">
</div>

<div class="square-nine">
</div>

CSS square

2 Answers2

CSS
square