如何在更大的 div 内制作图像中心(垂直和水平) [英] How to make an image center (vertically & horizontally) inside a bigger div

问题描述

我有一个 200 x 200 像素的 div.我想在 div 的中间放置一个 50 x 50 px 的图像.

I have a div 200 x 200 px. I want to place a 50 x 50 px image right in the middle of the div.

怎么做?

我可以通过对 div 使用 text-align: center 使其水平居中.但垂直对齐是问题..

I am able to get it centered horizontally by using text-align: center for the div. But vertical alignment is the issue..

推荐答案

就我个人而言，我会将它作为 div 中的背景图片，其 CSS 如下:

Personally, I'd place it as the background image within the div, the CSS for that being:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(假设一个带有 id="demo" 的 div，因为您已经指定了 height 和 width 添加一个 background应该不是问题)

(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)

让浏览器承受压力.

这篇关于如何在更大的 div 内制作图像中心(垂直和水平)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！