How to Center Things

   (0 reviews)

The center tag has been deprecated for nearly ten years and modern browsers may not support it now or in the future. The use of deprecated tags in your HTML is not good coding practice and is a good way to ensure that your codes will not be accepted at the Initiative.

The look, feel and behaviour of your website is the province of cascading styling sheets (CSS) and sometimes, javascript.

Centering text and images

The easiest thing to center!

Your HTML:

<div class="kitguide">
  Lorem Ipsum Rocks OK
</div>

Your CSS:

.kitguide {
  text-align: center;
}

Result:

Images added in the following way:

<div class="kitguide">
  Lore Ipsum Rules OK
  <img src="https://images.rpginitiative.com/uploads/monthly_2018_02/facebookbig2.png.3477e7e5d09247e3948456fb77387e38.png" />
</div>

Will obey text-align

Lore Ipsum Rules OK

Centering a Block

So, text and images are easy. But what about a div block? (Or a table, but you shouldn't be using tables either.)

Your HTML:

<div class="kitguide-block">
  I want to be in the center
</div>

Your CSS:

.kitguide-block {
  margin: 0 auto;
}

Where 0 is the top and bottom margins and auto is the left and right margins. As you can probably guess, the auto command automatically calculates the available space around the block and creates an even margin. So the result will be this:

It's easy to write code that conforms with good practice!

Now, what about center on both the vertical and horizantal axisis?

Center on the vertical axis and the horizantal axis!

This is done with a relatively new CSS command, called flex boxes. Flex is a powerful tool, helping you to create dynamic blocks that respond to available space. They can even help you create boxes that sit side by side on wide screens, but underneath each other as the screen gets smaller. And this can happen with minimal media queries.

So, your HTML:

<div class="kitguide-flex">
  <div class="kitguide">
    Center me of center!
  </div>
</div>

CSS

.kitguide-flex {
  display: flex;
  justify-content: center; /* horizantal center */
  align-items: center; /* vertical center */
}

Result:

So, essentially:

The block that you want to sit center of center exists in a parent. The parent defines the space in which the block sits center of center. Therefore, the parent needs the CSS that I have applied to kitguide-flex above.

If you're unsure of anything, please feel free to reach out in the software and hosting forum.