居中包含浮动图像的 DIV答案

【问题标题】：Centering a DIV containing floated images居中包含浮动图像的 DIV
【发布时间】：2012-07-14 16:37:18
【问题描述】：

我无法将其集中在我的页面上，我做了一些研究，似乎使用“inline-block”可能是要走的路，但我不确定如何实现它。

这是我的代码：

CSS

.bar img{
    float:left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
.bar img:hover {
    margin-top: 2px;
}

HTML

<div align = "center">
    <img src = "images/wk5title.png">
</div>

<!--THIS IS WHAT IM TRYING TO CENTER-->
<div class = "bar" style="margin : auto; text-align: center">
    <a href = "fb.html"><img src="images/fb.png"></a>
    <a href = "tw.html"><img src="images/tw.png"></a>
    <a href = "li.html"><img src="images/li.png"></a>
    <a href = "da.html"><img src="images/da.png"></a>
</div>

【问题讨论】：

您想将包含您的图像的 div 或 div 中的图像居中？

标签： html center

【解决方案1】：

定义一个宽度，然后使用您拥有的margin:auto。这会自动将元素居中在页面的中心。您还应该真正更改 <body background = "images/wk5bg.png" bgcolor = "#eeeeee"> 以使用 CSS。

body {
    background-image:url(image/wk5bg.png);
    background-color:#eeeeee;
}
div .bar {
    width:(your width here);
    margin:auto;
}

【讨论】：

【解决方案2】：

我在 .bar 中为 table 和 table-cell 添加了另一个 div。表格居中，单元格围绕内容缩小。
另外，我用填充替换了图像边距，即使在动画之后也可以悬停，并添加了 padding-bottom 来补偿提升。

http://jsfiddle.net/ZW9YB/

<div align="center">
    <img src="images/wk5title.png" />
</div>

<!--THIS IS WHAT IM TRYING TO CENTER-->
<div class="bar"><div>
    <a href="fb.html"><img src="images/fb.png" /></a>
    <a href="tw.html"><img src="images/tw.png" /></a>
    <a href="li.html"><img src="images/li.png" /></a>
    <a href="da.html"><img src="images/da.png" /></a>
</div></div>

.bar img {
    float:left;
    display: block;
    padding: 15px;
    -webkit-transition: padding 0.5s ease-out;
    -moz-transition: padding 0.5s ease-out;
    -o-transition: padding 0.5s ease-out;
}

.bar {
    display: table;
    margin: 0 auto;
}

.bar > div {
    display: table-cell;
    background: #faa;
    overflow: hidden;
}

.bar:after {
    clear: both;
}

.bar img:hover {
    padding-top: 2px;
    padding-bottom: 28px;
}

【讨论】：