Question

可能重复：
Image center align vertically and horizontally

我正在将图像上传到php文件，因此我可以将它们调整到一定的宽度或高度，这个尺寸或更小。我正在使用的图像缩放器是一个来自phpclasses.org的类，它似乎工作得很好。问题是，并非所有图像都是相同的大小。有些是宽而窄的，有些几乎是方形的。所以这导致所有图像都位于我的div的顶部，而不是中间。我的想法是让CSS完美地居中放置图像，以便在观看时不同的尺寸看起来不错，但我可以让它们水平居中但不垂直居中。这是我试图集中的截图：

enter image description here

正如你可以看到枪在div顶部对齐？我不能使用硬编码的图形将其推向中心，因为其他图像将具有不同的高度。我需要某种方法来确定图像的大小并从那里进行计算。

这是图像所在div的代码：

#product {
    float:left;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
}
#product-image {
    margin:2px auto;
    width:194px;
    height:145px;
    border:1px solid #999;
    text-align:center;
}

感谢您一看。

Answer 1

#product
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
#product img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}

Max-Height / Max-Width用于处理可能太大的图像。

Answer 2

对于动态垂直对齐，你不能使用绝对位置我建议在所有情况下使用javascript进行绝对修复但你可以使用以下Guide for vertical alignment中所见的几种技术

$(document).ready(function(){
    var image = $('#product-image');
    var container = $(image).parent();

    var margin = (container.height() - image.height()) / 2;
    image.css('margin-top', margin); 
});

使用以下CSS

#product
{
    float:left;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
    text-align:center;
}

#product-image
{
    margin:2px auto;
    width:194px;
    height:145px;
    border:1px solid #999;
}

Answer 3

<div id="product">

    <div id="product-Inner">

        <img id="product-image" src="imageURL" />

    <div>

<div>

样式css

#product {

    float:left;
    display: table;
    box-sizing: border-box;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
    text-align:center;

}

#product-Inner {

    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

#product-image {

    box-sizing: border-box;
    max-height: 100%;
    max-width: 100%;
    border:1px solid #999;


}

Answer 4

您可以通过display:table-cell＆amp ;;轻松获得所需的结果vertical-align:middle;

<强> CSS

   #parent {
    width:200px;
    height:200px;
    display:table;
    background-color: black;
    float:left;
    margin:5px;
}

#parent-image {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}

<强> DEMO

如何在div中垂直和水平对齐图像？

4 个答案: