如何垂直和水平对齐div中的图像？ [复制]答案

【问题标题】：How to vertically and horizontally align image in div? [duplicate]如何垂直和水平对齐div中的图像？ [复制]
【发布时间】：2012-11-09 06:09:46
【问题描述】：

可能重复：
Image center align vertically and horizontally

我正在将图像上传到一个 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;
}

感谢观看。

【问题讨论】：

你需要使用display: table-cell;
嘿，外星人先生，我相信你是对的。感谢您的指导:)

标签： html css

【解决方案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 用于处理可能太大的图片。

【讨论】：

Farhan，非常感谢您向我展示 max-height 和 max-width。真是太神奇了，这如何解决了我的很多问题。至于vertical-align，我似乎无法让它正常工作。让我再玩一下:)
@Mike 你不能使用vertical-align: middle;，除非你使用的是桌子或display: table-cell;

【解决方案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;
}

【讨论】：

【解决方案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;


}

【讨论】：

【解决方案4】：

您可以通过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;
}

DEMO

【讨论】：