How to Vertically Center an Image within a Responsively Sized Div?

Vertically Align an Image Inside a Div with Responsive Height

Problem

How can we vertically align an image within a div that has a dynamic height that adjusts to the width when the browser window is resized to maintain a square aspect ratio?

Vertical Alignment

To achieve this, we can employ the following technique:

1. Create an inline-block pseudo-element: As the first (or last) child of the parent div, a pseudo-element with a 100% height is generated to occupy the entire parent's height.
2. Set vertical-align: The vertical-align property is applied to both the pseudo-element and the image element to align them vertically in the middle of the container.
3. Remove white space: A font size of zero is set on the parent to eliminate the white space between the inline-block elements.

Benefits

• The container (parent div) can have dynamic dimensions, allowing its height to change along with the width.
• The image element's dimensions do not need to be explicitly specified.
• This technique can also be used to vertically align a div element with dynamic content, but the font-size of the div must be reset to display the enclosed text.

Responsive Container

To create a responsive container, where the height adjusts with the width, we can apply a percentage value to the top/bottom padding or margin property.

Combining Vertical Alignment and Responsive Container

To implement both vertical alignment and a responsive container, we can wrap the image element in a wrapper div with absolute positioning and expand it to fill the container's entire space.

Code Example

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="...">
  </div>
</div>

.responsive-container {
  width: 60%;
  position: relative;
}

.dummy {
  padding-top: 100%; /* maintains 1:1 aspect ratio */
}

.img-container {
  text-align: center;
  font: 0/0 a;
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

This code demonstrates how to vertically align an image within a responsive container, where the container's height adjusts based on the available width.

The above is the detailed content of How to Vertically Center an Image within a Responsively Sized Div?. For more information, please follow other related articles on the PHP Chinese website!