如何使一个图像中心(垂直和水平)在一个更大的div

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

怎样才能做到呢?

我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..

当前回答

我有一个图片库，我不知道准确的高度或宽度的图像之前，我只知道他们是小于div，他们将被包含。

通过在容器上组合行高设置并在图像元素上使用vertical-align:middle，我最终使用以下HTML标记和以下CSS使其在FF 3.5、Safari 4.0和IE7.0上工作。

HTML标记

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }

2009-09-23 23:36:38

其他回答

谢谢大家提供的线索。

我用了这个方法

div.image-thumbnail
{
    width: 85px;
    height: 85px;
    line-height: 85px;
    display: inline-block;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
}

2011-07-27 05:52:21

你可以用下面的代码水平和垂直地居中一个图像(在IE/FF中工作)。它会将图像的上边缘放置在浏览器高度的50%，而margin-top(向上拉图像高度的一半)将完美地居中。

<style type="text/css">
    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {vertical-align: middle; width: 100%;}
         #inner {position: relative; top: -50%} /* for explorer only */
</style>


<body style="background-color:#eeeeee">
    <div id="middle">
        <div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
            <img src="..." height="..." width="..." />
        </div>
    </div>
</body>

2011-02-22 23:47:16

我有一个图片库，我不知道准确的高度或宽度的图像之前，我只知道他们是小于div，他们将被包含。

通过在容器上组合行高设置并在图像元素上使用vertical-align:middle，我最终使用以下HTML标记和以下CSS使其在FF 3.5、Safari 4.0和IE7.0上工作。

HTML标记

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }

2009-09-23 23:36:38

div { position: absolute; border: 3px solid green; width: 200px; height: 200px; } img { position: relative; border: 3px solid red; width: 50px; height: 50px; } .center { top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ } <div class="center"> <img class="center" src="http://placeholders.org/250/000/fff" /> </div>

如何使一个图像中心(垂直和水平)在一个更大的div

推荐文章

最新文章

标签