Before adopting CSS, the styling of a web page was achieved primarily through the use of presentational tags. To change the font, alignment, color, or other visual properties, one had to compose the correct tags and attributes together. If you want to read an excellent summary of the early days of web layout, I would highly recommend checking out the web layout history over at grid-layout.com.

These presentational tags were eventually dropped in favor of CSS for a few reasons, the biggest being the desire to separate content and presentation. HTML would therefore focus exclusively on providing semantic meaning to content, while CSS would focus on visual structure and styling. Interestingly enough, the one presentational tag that seemed to live long past its deprecation was the center tag. Google still used the center tag on its home page as late as 2020.

In this lesson, we will be creating a Center layout primitive that centers itself and its children.

The problem: the Testimonial#

In this lesson, we will be creating this Testimonial component:

The above component will need to have a max-inline-size of 60ch and center itself in any parent container larger than that width. The component should also be able to center its children and text.

The solution#

Like always, you can follow along by going to the codesandbox.io starter project.

Here is how our code starts out:

export default function Testimonial() {

  return (

    <div>

      <h2>Home4Hire</h2>

      <p>

        "Lorem ipsum dolor sit amet, nibh lorem convenire quo et. Usu ea libris

        omittantur. Dicta theophrastus ad mei. Dicat appetere at vis, qui ne

        scripta docendi."

      </p>

      <Attribution />

    </div>

  );

}

And this is how it looks:

First, let's build our Center primitive:

export const Center = styled.div`

  box-sizing: content-box;

  margin-inline-start: auto;

  margin-inline-end: auto;

  max-inline-size: 60ch;

`;

In the above code, we set the box-sizing to be content-box, the inline margin to be auto, and the max-inline-size to be 60ch. You will remember from Module 1 that max-inline-size is the CSS logical property variation of max-width, but instead of being based on the physical properties of the screen, it is based on the writing mode.

Hopefully, when you saw that we were setting the inline margin and max-inline-size, you will have asked, "Hey, I thought setting the margin or size properties directly on a component was breaking the first rule of Encapsulated CSS?" And yes, you would be right. It does break the rule, but what we are doing in the above code still follows the "spirit" of the rule.

Let me explain. In this code, we are setting the box-sizing property to be content-box. This means that any time we constrain the size, like with max-inline-size, we are only constraining it at the content-box level of the box model. In other words, setting the max-inline-size is effectively setting the max-inline-size on its child.