CSS code to center the box horizontally

To center the box horizontally, you can set the text-align: center attribute on its parent container. The specific steps are as follows: 1. Set the display: inline-block; attribute for the box. 2. Set the text-align: center attribute for the box's parent container.

How to use CSS to center the box horizontally

Direct answer:

To make the box horizontally centered, you can set the text-align: center attribute on its parent container.

Detailed instructions:

To center the box horizontally, you need to perform the following steps:

1. Settings for the box display: inline-block; attribute. This will make the box a block-level element and allow it to be set horizontally.
2. Set the text-align: center attribute for the box's parent container. This will horizontally center all block-level elements in the parent container, including boxes.

Sample Code:

<code class="css">#parent {
  text-align: center;
}

#box {
  display: inline-block;
}</code>

Application Example:

Add the following HTML and CSS code to your Page:

HTML:

<code class="html"><div id="parent">
  <div id="box">This box is centered horizontally.</div>
</div></code>

CSS:

<code class="css">#parent {
  text-align: center;
}

#box {
  display: inline-block;
}</code>

The browser will horizontally center the text "This box is horizontally centeredly." box.

The above is the detailed content of CSS code to center the box horizontally. For more information, please follow other related articles on the PHP Chinese website!