Question

我想使用CSS Trick将图像居中。但是如果图像大小是随机的（未固定的）会怎样。令人惊讶的是，我不想保持图像响应，我想在不改变其宽度或高度（实际像素）的情况下将图像放在中心。

以下是我的代码：

HTML：

<div class="slider"><img class="center" src="images/mySlide.jpg" /></div>

CSS：

.slider{
       width: 100%;
       position: relative;
}
.center {
       width: 300px;
       height: 300px;
       position: absolute;
       left: 50%;
       top: 50%; 
       margin-left: -150px;
       margin-top: -150px;
}

Answer 1

您可以将这样的图像居中：

http://jsfiddle.net/NicoO/y5vh3/2/

.slider {
    width: 100%;
    position: relative;
    text-align: center;
    height: 400px;
}
.slider:before
{
    height: inherit;
    display: inline-block;
    vertical-align: middle;
    content:"";
}

.center {
    display: inline-block;
    margin: auto;
    vertical-align: middle;
}

使用这样的HTML：

<div class="slider">
    <img class="center" src="http://www.placehold.it/100x40" />
</div>

图像在div未知高度宽度的中心

1 个答案: