Jump to content

How to Center Things
   (0 reviews)

Kit the Human
  • If you don't know how to center without the center tag, this guide will show you how.

    Type: Look & Feel

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:

 

Lorem Ipsum Rules OK

 

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
facebookbig2.png.3477e7e5d09247e3948456f

 

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:

I want to be in the center

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:

 

Center me of center!

 

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.

Edited by Kit the Human





User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

There are no reviews to display.


×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.