Centring some divs

Hi All,
I have tried various fixes but can’t center the container divs in the middle of the screen. Please help. The link below is to the project.

[link in profile]

One immediate fix will be in the following,

.container {
  display: inline-block;
  box-sizing: border-box;
  width: 80%;
  max-height: 30%;
  margin: 20px auto ;
  padding: 10px;
  border: 5px solid black;
}

to change,

display: inline-block;

to,

text-align: center;

It should be noted that padding will stretch a container on the axis to which it is applied. The following stretches on both axes…

  padding: 10px;

For better control, I suggest not using padding on the horizontal axis.

padding: 10px 0;

If we look at the selector rules for the six color ids the thing that stands out is they each have but one difference, the background-color. That means we can write a selector rule that can apply to all of them, and write all the properties only once.

<div class="container">
  <div id="colors">
    <p id="yellow">yellow <br>#FFFF47</p>
    <p id="light-orange">light-orange<br>#F17F29</p>
    <p id="dark-orange">dark-orange<br>#F96900</p>
    <p id="green">green<br>#2A7A00</p>
    <p id="turquoise">turquoise<br>#E5FCFF</p>
    <p id="blue">blue<br>#2D99FF</p>
  </div>
</div>
#colors p {
  display: inline-block;
  overflow: hidden;
  min-width:10%;
  min-height: 200px;
  color: blue;
}
#yellow {
  background-color: #FFFF47;
}
/* etc. */

When you get into scripting, you’ll find backgroundColor is the property we use to change the color. However it will not override background so that property should not be used unless it is more descriptive than just the color.

Eg.

background: #fff url(background-image.png) 50% 50% cover no-repeat fixed;

That’s just an example. As mentioned, the background color is not the same as, background-color: #fff. Were we to want to dynamically change the background color, we would need to replicate the property above in its entirety else we would lose the other property values.

The above is a kind of down the road exercise, but I would suggest studying shorthand rules versus explicit properties. There is a time to use shorthand, and there are times not to. There may be drawbacks in some cases.

Wow, thank you so much for the help I’m going to amend the code now. I have only been learning HTML and CSS for about 2 month so still have a long way to go. Thanks again!

1 Like