How to set img horizontal centering in css

There are four ways to set the horizontal centering of the img element through CSS: 1. Use text-align to center the parent element; 2. Use margin: auto to center the element relative to the parent element; 3. Use flexbox, Set the parent element display to flex and justify-content to center; 4. Using grid layout, create a grid and place the img element in the centered cell.

Settings for horizontal centering of img in CSS

How to horizontally center img elements?

In CSS, there are several ways to center the img element horizontally:

1. text-align

The easiest way The text-align attribute is used to set the parent element of the img element to be centered.

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

2. margin: auto

Another way is to use margin: auto, which will make the img element relative to its parent element Centered.

<code class="css">img {
  margin: auto;
}</code>

3. flexbox

Use flexbox layout, you can also set the parent element's display: flex and justify-content: center to center the img element horizontally.

<code class="css">.parent-container {
  display: flex;
  justify-content: center;
}

img {
  align-self: center;
}</code>

4. grid

Using grid layout, you can create a grid and then place the img element in a centered cell in the grid.

<code class="css">.parent-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

img {
  grid-column: 2;
}</code>

Choose the appropriate method

Which method you choose depends on the specific requirements of your project. For most cases, using text-align or margin: auto is sufficient. However, if more advanced layout or control is required, flexbox or grid layout may be a better choice.

The above is the detailed content of How to set img horizontal centering in css. For more information, please follow other related articles on the PHP Chinese website!