To center an inline element in HTML, we commonly use CSS. Below are steps to achieve this, using both a container and the element itself.

1. Centering an inline element within a container

If the inline element (like span or a) is inside a container, you can center it horizontally within the container.

  • First, create a div container with text-align: center; and place the inline element inside it:
<div style="text-align: center;">
<span>This is a centered inline element</span>
</div>
  • Here, the text-align: center; in the div container ensures that all inline elements within it are centered horizontally.

2. Directly centering an inline element

To center an inline element without a container, such as a button or a link, you can apply display: inline-block; to make it behave like a block element, then use text-align: center;.

<span style="display: inline-block; text-align: center;">Centered inline element</span>