Types of HTML elements

HTML elements are either block-level or inline elements. Block-level elements take up the whole line, whereas inline elements take up only the width of the content.

Commonly used block-level elements are <div>, <h1> (and all the heading tags), and <p>.

Commonly used inline elements are: <a>, <button>, and <span>.

<div>Block #1 - div</div>
<section>Block #2 - section</section>
<span>Inline #1 - span</span>
<label>Inline #2 - label</label>

You may have also seen display: inline-block.

The inline-block element doesn’t start at a new line (like an inline element).

However, it has the ability for you to set width, height, margin, and padding (like a block-level element).

When centering, it follows the inline rules.

Block in block

We are going to create a container with a smaller content wrapper that is not the full width of the container.

<div id="container">
  Container
  <div id="content">
    Content
  </div>
</div>

#container {
  width: 100%;
}
#content {
  width: 200px;
  height: 50px;
}

The content wrapper’s width is not the full width of the parent so there will be empty horizontal space to the right. In order to center the content wrapper, we would need to split the empty horizontal space evenly on the left and right side.

Use margin: 0 auto to center the content wrapper. Top and bottom margins are zero. The left and right margins are auto, which will split the empty space evenly on the left and right.

#container {
  width: 100%;
}
#content {
  width: 200px;
  height: 50px;
  margin: 0 auto;
}

Block in inline

It is not standard practice to put a block-level element inside an inline one. In the rare times it is done it is usually for making a heading into a link. If you were to do <h1><a> only the text is clickable. However, if you do it as <a><h1> (block in inline) the whole line is clickable. To center the link text, you can set text-align: center to either the parent (container) or child (content wrapper).

<a class="link" href="#">
  <h1 class="heading">Heading link here</h1>
</a>

.heading {
  text-align: center;
}

Inline in inline

This is frequently used if you want to add additional styling, such as highlighting a word in a paragraph.

Since all inline elements are on the same line together, it wouldn’t be possible to center just one element.

Inline in block

Inline elements do not start on a new line and they flow with the rest of the content on the same line.

Therefore, there isn’t any empty horizontal space as you saw in the block in block example above. If you try to set margin: 0 auto for the content, nothing happens.

<div id="container">
  Sample text here.
  <span id="content">
    Content flows together with the container
  </span>
</div>

#container {
  width: 100%;
}

#content {
  margin: 0 auto;

The content flows with the container, wrapping onto the next line if there’s additional text. The content wrapper won’t claim a new line for itself, which is why the setting the margins to auto won’t work. If you want to center an inline element, use text-align: center in the parent instead.

<div id="container">
  <span id="content">
    Content
  </span>
</div>

#container {
  width: 100%;
  text-align: center;
}

What NOT to do

Set fixed margins

Fixed margins are not the best solution because setting them requires calculation. Let’s say container’s width is 275px and the content’s width is 175px, the empty space is 275px - 175px = 100px.

Margins to left and right would be 50px each. If you set margin: 0 50px it looks the same as doing margin: 0 auto.

Everything looks the same only for these dimensions though. Changing the width of the container or content wrapper will throw the centering off. If we change the width from width: 200px to width: 120px we can see the difference between the two.

<div class="container">
  <div class="content" id="auto-margin">
    Content with auto margin
  </div>
</div>

<div class="container">
  <div class="content" id="fixed-margin">
    Content with fixed margin
  </div>
</div>

.container {
  width: 275px;
}

.content {
  width: 120px;
  height: 50px;
}

#auto-margin {
  margin: 0 auto;
}

#fixed-margin {
  margin: 0 50px;
}

The fixed-margin content wrapper is no longer in the center after its width changed. In order to fix the centering, you would need to redo the calculations again. It is much easier to stick with using auto margins and not worry when elements need to be resized.

Translate the element

Another way to center the content would be to “move” the element to the midline of the container.

You would do the same math as above and calculate you need to move the content 50px from the left.

Instead of margin: 0 auto; you would do transform: translate(50px); and the content would be in the same position.

This is a bad idea for the same reason as for setting a fixed margin. If any sizing changes, you would need to redo the calculations.

Seek to simplify

Fixed margins or sizes are not recommended because web sites can be viewed on every device size imaginable.

The stylesheet would be a nightmare if you had to style for every device. Between 320px and 480px, do this. Between 480px and 560px, do this.

When thinking about how to style a page layout, consider the type of elements you are using first and then add the properties afterward.

Choose the solution that makes your development easier.