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

问题描述

我有一个div 200 x 200像素。我想把一个50×50像素的图片放在div的中间。

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.

如何做？

我可以使用 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 和已经指定高度和 不应该是问题）

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

让浏览器解决紧张。

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