Question

.b1, .b2, .b3, .b4 {
    width : 100px;
    height : 100px;
    display : inline-block;
    border: 3px white solid;
    border-radius: 50%;
    text-align : center;
}

The code for the question is in: https://jsfiddle.net/cfr9su45/

body {
  background-color: black;
}

.b1,
.b2,
.b3,
.b4 {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 3px white solid;
  border-radius: 50%;
  text-align: center;
}

.b1 {
  background: red;
}

.b2 {
  background: blue;
}

.b3 {
  background: salmon;
}

.b4 {
  background: green;
}

<div class="b1"> </div>
<div class="b2"> </div>
<br/>
<div class="b3"> </div>
<div class="b4"> </div>

The text-align: center for the isn't aligning the div's to the centre. Why? And what is the code to make it align to the centre (without any space from the top, just the centre)

I don't want to try:

body {
  text-align: center;
}

I just want those 4 div's to be in the centre.

Answer 1

Because the text-align: center is a property that needs to go on the container of the items you want to center.

body {
  text-align: center;
}

https://jsfiddle.net/cfr9su45/1/

body {
  background-color: black;
}

body {
  text-align: center;
}

.b1, .b2, .b3, .b4 {
  width : 100px;
  height : 100px;
  display : inline-block;
  border: 3px white solid;
  border-radius: 50%;
  text-align : center;
}

.b1 {
  background: red;
}

.b2 {
  background: blue;
	
}

.b3 {
  background: salmon;
}

.b4 {
  background: green;
}

<html>
  <body>
    <div class = "b1"> </div>
     <div class = "b2"> </div> <br/>
    <div class = "b3"> </div>
    <div class = "b4"> </div>
  </body>
</html>

EDIT: Following up on the comment by @deathjack2-0 and @marco-luzzara, if you want to properly do it, you need to re-structure your code. Currently you do not have a container on your div items.

<html>
  <body>
    <div class = "b1"> </div>
    <div class = "b2"> </div> <br/>
    <div class = "b3"> </div>
    <div class = "b4"> </div>
  </body>
</html>

Applying properties to the body isn't a good idea unless it's a background color or something. Add a container around your divs.

<html>
  <body>
    <div class = "theContainer">
      <div class = "b1"> </div>
      <div class = "b2"> </div> <br/>
      <div class = "b3"> </div>
      <div class = "b4"> </div>
    </div>
  </body>
</html>

And apply the CSS property to that instead.

.theContainer {
  text-align: center;
}

https://jsfiddle.net/cfr9su45/4/

body {
  background-color: black;
}

.theContainer {
  text-align: center;
}

.b1, .b2, .b3, .b4 {
  width : 100px;
  height : 100px;
  display : inline-block;
  border: 3px white solid;
  border-radius: 50%;
}

.b1 {
  background: red;
}

.b2 {
  background: blue;
	
}

.b3 {
  background: salmon;
}

.b4 {
  background: green;
}

<html>
  <body>
    <div class = "theContainer">
      <div class = "b1"> </div>
      <div class = "b2"> </div> <br/>
      <div class = "b3"> </div>
      <div class = "b4"> </div>
    </div>
  </body>
</html>

Answer 2

The text-align: center;property needs to go to their parent, in your case, the body.

Answer 3

body {
  background-color: black;
}

.center {
  text-align: center;
}

.b1,.b2,.b3,.b4 {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 3px white solid;
  border-radius: 50%;
}

.b1 {
  background: red;
}

.b2 {
  background: blue;
}

.b3 {
  background: salmon;
}

.b4 {
  background: green;
}

<div class = 'center'>
  <div class = "b1"> </div>
  <div class = "b2"> </div> <br/>
  <div class = "b3"> </div>
  <div class = "b4"> </div>
</div>

You can create another container , div and use text-align : center; Because text-align property applies to block containers.

Answer 4

If you really don't want a text-align:center; you can set margin but it's not very clean :

.b1,.b3
{
  margin-left:calc(50% - 108px);
}

Why won't the div tags align to the centre?

4 个答案:

Why won&#39;t the div tags align to the centre?

4 个答案:

Why won't the div tags align to the centre?