3

我有一个循环在浮动 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>

请帮忙，谢谢。

4

6 回答 6

2

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

缩放到图像的中心（图像填充 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;
    }
于 2016-03-24T08:48:43.313 回答
1

您确实应该将 CSS 从style属性中移出并放入文件中，style.css如果您还没有这样做的话。但如果你真的需要，你可以像现在一样将下面的代码放入内联样式中。

从图像标签中删除align="left"属性并将图像的显示设置为block。这将允许margin: 0 auto;您在包含的 DIV 中为您的图像居中。

看起来您必须<table>使用 CSS 复制 a 才能获得所需的垂直居中。表格单元格允许垂直居中。为此，我添加了一个带有.container. DIV的.container显示设置为table，而.image-containerDIV 的作用类似于表格单元格，其显示设置为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/

于 2013-07-15T03:23:21.960 回答
1

只需创建一个类“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;
}

只需查看小提琴。 我的小提琴

戴夫

于 2014-11-21T10:19:15.850 回答
0

If you are trying to get it in the middle inside the div, have you tried:

<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>

I used "margin-left:50%; margin-top:50%;" INSIDE the IMG tag and got rid of the "align" and "float" attribute. I probably wouldn't want to use "align" in this case. Either way, I hope it helps.

于 2013-07-15T03:11:57.067 回答
0

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

使用 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";
于 2013-07-15T03:35:55.383 回答
-1

为什么不设置图像中心对齐？那么你的代码应该是：

<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 块的比例+它的填充和边框的问题。尝试设置它的平衡。

于 2013-07-15T03:06:41.680 回答