How to make the image appear in the center up and down in css

下次还敢
Release: 2024-04-25 11:57:15
Original
1235 people have browsed it

Methods to use CSS to center the image up and down include: using flexbox, setting the flex-direction of the parent container to column, justify-content and align-items to center. Use absolute positioning, set the image's position to absolute, top and left to 50%, and use the transform attribute for offset. To use a grid layout, set the parent container's display to grid and place-items to center. Use the object-fit attribute to center the image

How to make the image appear in the center up and down in css

How to use CSS to center the image up and down

in CSS , you can use the following method to center the image up and down:

Method 1: Use flexbox

<code class="css">.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  height: 100px;
}</code>
Copy after login

Method 2: Use absolute positioning

<code class="css">.container {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>
Copy after login

Method 3: Use grid layout

<code class="css">.container {
  display: grid;
  place-items: center;
}

img {
  height: 100px;
}</code>
Copy after login

Method 4: Use object-fit attribute

<code class="css">img {
  object-fit: contain;
}</code>
Copy after login

Method 5 : Use padding

<code class="css">.container {
  padding: 20px 0;
}

img {
  height: 100px;
}</code>
Copy after login

Suggestions for choosing a method:

  • If you need other elements around the image, use flexbox or grid layout.
  • If the image size is fixed, use absolute positioning or object-fit attributes.
  • If the image size is not fixed, it is recommended to use flexbox or grid layout.

The above is the detailed content of How to make the image appear in the center up and down in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template