3

可能重复：
图像中心垂直和水平对齐

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

在此处输入图像描述

如您所见，枪支在 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;
}

谢谢你看。

4

4 回答 4

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 用于处理可能太大的图像。

于 2012-11-21T03:06:12.890 回答
1

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

$(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;
}​
于 2012-11-21T03:36:25.413 回答
1 
<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;


}
于 2012-11-21T05:40:48.050 回答
1

display:table-cell您可以通过&轻松获得您想要的结果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;
}

演示

于 2012-11-21T05:41:09.023 回答