Question

我在浮动的div块中有一个加载徽标图像的循环，我尝试了一些来自stackoverflow的提示，但没有运气使徽标对齐div中间和中间，所有徽标高度都不固定，可能有不同的高度对于每个人：

<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
    <img width="78px" align="left" src="images/logo/logo1.jpg">     
</div>

请帮助，谢谢。

Answer 1

使用定位。以下对我有用......

缩放到图像的中心（图像填充div）：

    div{
        float:left;
        display:block;
        overflow:hidden;
        width: 70px; 
        height: 70px;  
        position: relative;
    }
    div img{
        min-width: 70px; 
        min-height: 70px;
        max-width: 250%; 
        max-height: 250%;    
        top: -50%;
        left: -50%;
        bottom: -50%;
        right: -50%;
        position: absolute;
    }

不缩放到图像的中心（图像不填充div）：

   div{
        float:left;
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

Answer 2

如果你没有这样做，你真的应该将你的CSS从style属性移到像style.css这样的文件中。但是，如果你真的需要，你可以将下面的代码放到你现在的内联样式中。

从图片代码中移除align="left"属性，并将图片的显示设置为block。这将允许margin: 0 auto;在包含DIV的内容中为您居中。

看起来您必须使用CSS复制<table>才能获得所需的垂直居中。表格单元允许垂直居中。为此，我添加了一个.container类的DIV。 .container DIV将其显示设置为table，而.image-container DIV（表示为表格单元格）的显示设置为table-cell。

<强> CSS

.container {
    float: left;
    width: 80px;
    height: 80px;
    padding: 8px;
    border: 1px solid #ccc;
    display: table;
}
.image-container {
    display: table-cell;
    vertical-align: middle;
}
.image-container img {
    display: block;
    margin: 0 auto;
}

<强> HTML

<div class="container">
     <div class="image-container">
          <img src="images/logo/logo1.jpg">
     </div>
</div>

JSFiddle：http://jsfiddle.net/MJ5j4/

Answer 3

只需创建一个“centerImgWrapper”类，然后使用div将所有“中心”图像包装在代码中的任何位置。

纯粹的CSS

.centerImgWrapper {
 width: 100%;
 height: 100%;
 position: relative;
 overflow: hidden;}

.centerImgWrapper img {
 left: 0;
 right:0;
 top: 0;
 bottom:0;
 max-height: 100%;
 max-width: 100%;
 margin:auto;
 position:absolute;
}

请查看小提琴。 MyFiddle

Dave da Wave

Answer 4

如果你试图将它放在div中间，你试过了吗？

<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;">
        <img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">     
    </div>

我使用了“保证金左：50％;保证金最高：50％;” INSIDE IMG标签并摆脱“对齐”和“浮动”属性。在这种情况下，我可能不想使用“对齐”。无论哪种方式，我希望它有所帮助。

Answer 5

图像或多或少显示为内嵌块。所以你可以在容器div的样式上设置text-align: center;。

在css中使得在中间垂直对齐的东西很复杂。如果你打算用JavaScript动态地放置徽标，你可以通过用JavaScript指定边距来省去麻烦并垂直居中。

查看此演示：http://jsfiddle.net/jyvFN/1/

HTML

<div id="container">
    <img id="logo" src="http://placekitten.com/100/100" />
</div>

CSS：

#container {
    float: left;
    background-color: blue;
    width: 200px;
    height: 150px;
    text-align: center;
    border: 1px solid red;
}

的JavaScript

var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottom = margin + "px";

Answer 6

为什么没有设置图像中心的对齐？然后你的代码应该是：

<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="center" src="images/logo/logo1.jpg">

我认为这也是图像宽度与div块+它的填充和边界之比的问题。尝试设置它的平衡。

将图像中心对齐浮动div

6 个答案: