1

我有 4 张图像，由于某些原因，我的大脑停止工作，我无法弄清楚为什么我无法将这些图像居中。

那是小提琴-> http://jsfiddle.net/theminijohn/bcMX5/

如果我只尝试他们，我会在我的编辑器中<center>获得一个。Deprecated Html Tag Error

我尝试了很多东西，直到重写 Css 和 Html 代码，但我的大脑卡在这里。

哪位绅士能帮忙打破我的封锁？:)

4

6 回答 6

1

尝试这样做： -

在所有img DIV之外给一个“主”DIV“ <div id="main">”

并给margin: 0 auto;它一些宽度。

请参考小提琴：http: //jsfiddle.net/aasthatuteja/6U2YJ/

希望这能解决您的问题！

于 2013-09-18T18:06:54.110 回答
1

所有这些 div 都需要位于一个具有固定宽度的容器 div 中。然后你可以申请margin: 0 auto到容器。

http://jsfiddle.net/bcMX5/9/

于 2013-09-18T18:05:05.497 回答
1

这是一种方法。

在 's周围添加一个包装块元素div，然后应用以下 CSS：

.wrap {
    border: 1px solid blue;
    overflow: auto;
    text-align: center;
}
/* Center 4 Blocks */
 .hd_b {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    display: block;
    text-decoration: none;
}
._hd {
    margin-right: 20px;
    display: inline-block;
    text-align: center;
}
._hd:last-child {
    margin-right: 0;
}
._hd img {
    opacity: .85;
}
._hd a:hover img {
    opacity: 1;
}

请参阅http://jsfiddle.net/audetwebdesign/QTxy9/上的演示

父.wrap块有text-align: center，这将使有 的子._hddiv居中display: inline-block。

您需要使用 重置最后一个子 div 的右边距._hd:last-child。

如果您愿意使用 inline-block 显示类型，这将非常有效。

请注意，行内块元素之间的任何空白都会转换为 1ex 宽的空间，当您设置块之间的边距时，这可能并不明显。

于 2013-09-18T18:11:32.850 回答
0

这会是你想要的吗？._hd { margin-right: 20px; 显示：块；宽度：100%；文本对齐：居中；}

于 2013-09-18T18:02:28.980 回答
0

忘记margin和float;) http://jsfiddle.net/bcMX5/8/

._hd {
    //margin-right: 20px;
    display: block;
    //float: left;
    text-align: center;
}
于 2013-09-18T18:09:26.783 回答
0

取决于您要如何使元素居中？如果它在列中，则上述答案将起作用。它在一个网格中，然后将它们包装在一个固定宽度的容器中。

._hd_container{
    width:440px;
    margin:0 auto;    
}



http://jsfiddle.net/RzfMP/

于 2013-09-18T18:11:22.597 回答