How to Horizontally Align DIVs Within a Container DIV?

Aligning DIVs Horizontally

When attempting to center DIVs horizontally within a container DIV, you may encounter alignment issues. This can occur for several reasons. To rectify the problem, consider the following solution:

Use Inline-Block Display Instead of Float

Instead of utilizing the float property, consider employing the display: inline-block attribute. This will ensure that the DIVs are displayed as inline elements, allowing for horizontal alignment.

Updated Code

To implement this solution, modify your CSS code as follows:

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  display: inline-block;
}</code>

This adjustment will rectify the horizontal alignment issue, enabling the DIVs to be positioned centrally within the container. It is worth noting that this approach is particularly suitable for scenarios where the width of the DIVs is fixed or relatively similar.

The above is the detailed content of How to Horizontally Align DIVs Within a Container DIV?. For more information, please follow other related articles on the PHP Chinese website!