Question

我有4张图片，由于某些原因，我的大脑停止工作，我无法弄清楚为什么我不能把它们放在那里。

那是小提琴 - ＆gt; http://jsfiddle.net/theminijohn/bcMX5/

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

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

一些绅士可以帮助制止我的封锁吗？ :)

Answer 1

所有这些div都需要在一个具有固定宽度的容器div中。然后，您可以将margin: 0 auto应用于容器。

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

Answer 2

尝试这样做： -

在所有img DIV“<div id="main">”

之外提供“主”DIV

并给予“margin: 0 auto;”以及一些宽度。

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

希望这可以解决你的问题！

Answer 3

这是一种方法。

在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，这将使具有._hd的子display: inline-block div居中。

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

如果您愿意使用内联块显示类型，这非常有用。

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

Answer 4

这会是，你想要吗？ ._hd { 保证金权利：20px; 显示：块; 宽度：100％; text-align：center; }

Answer 5

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

._hd {
    //margin-right: 20px;
    display: block;
    //float: left;
    text-align: center;
}

Answer 6

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

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

http://jsfiddle.net/RzfMP/

将Div与图像对齐

6 个答案: