Question

在下面的代码中，如何自动将父div中的第二个div居中？我在这里使用nth-child。你会在小提琴中看到我的意思。第一个和第三个对我来说没问题，但第二个是有问题的孩子。

<!DOCTYPE html>
<html>
<head>

<title>Display</title>

<style>

img.thumbnail {
    background: none repeat scroll 0 0 #FFFFFF;
}

.image:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.image {
    -moz-box-sizing: border-box;
    border: 1px solid #DDDDDD;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
    float: left;
    height: 150px;
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
}

.image img {
    vertical-align: middle;
}

.delete {
    position:relative;
    vertical-align:middle;
    display:inline-block;
}

.delete .icon-remove {
    content:'';
    position:absolute;
    bottom:0;
    right:0;
}

.imageContainer {
    width:665px;
    border:1px solid #666;
    float:left;
    position: relative;
    overflow: hidden;

}

.image:nth-child(3n+1) {
    margin-left:0px;
}

.image:nth-child(3n+2) {
    margin-left: auto;
  margin-right: auto;
}

.image:nth-child(3n+0) {
    float:right;
}

</style>

</head>
<body>

<div class="imageContainer">
    <div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
    <div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
    <div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
    <div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
    <div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
    <div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
</div>

</body>

</html>

Answer 1

我知道这不是回答这里的最好方法，但我现在没有时间编写代码。我的提示是试试display:flexbox。在这里你可以定义元素之间的差距，我只在新的浏览器中工作，它需要更多的渲染过程，但它应该适用于你的目的。

这里是MDN链接，希望你能帮助你。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

最好的问候

Answer 2

以下是您问题的快速解决方法。将3张图片包裹在.row div中，并将position:absolute提供给中心div。看看这是否有帮助。

HTML：

    <div class="row clearfix">
        <div class="image"><div class="delete"><img class="thumbnail" src="http://i.imgur.com/mHg4A13.jpg"><i class="icon-remove white"></i></div></div>
        <div class="image"><div class="delete"><img class="thumbnail" src="http://i.imgur.com/mHg4A13.jpg"><i class="icon-remove white"></i></div></div>
        <div class="image"><div class="delete"><img class="thumbnail" src="http://i.imgur.com/mHg4A13.jpg"><i class="icon-remove white"></i></div>
    </div>

CSS：

    .image:nth-child(3n+2) {
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        left: 0px;
        right: 0px;

        /*Update */
        width: 172px;
        padding-left: 0px;
        text-align: center;
        padding-right: 0px;


    }

   .row{ position:relative; }

Updated DEMO

Answer 3

如果您从所有图片中删除float:left

.image {
    -moz-box-sizing: border-box;
    border: 1px solid #DDDDDD;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
    /*float: left;*/
    height: 150px;
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
}

然后像这样定义图像：

.image:nth-child(3n+1) {
    float:left;
}

.image:nth-child(3n+2) {
    float:right;
}

.image:nth-child(3n+0) {
    width:150px;
    margin-left: auto;
    margin-right: auto;
}

它有效但是标记的顺序已更改，它将填充如下：

<div> //container
    <div></div> // goes left
    <div></div> // goes right
    <div></div> // goes in the middle

    <div></div> // goes left
    <div></div> // goes right
    <div></div> // goes in the middle
</div>

查看小提琴：http://jsfiddle.net/epvvL1zy/8/

Answer 4

为了补充@Paulquappe的答案，你可以查看这个非常好的flexbox指南。

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

根据我的理解，你想要实现的是

.imageContainer {
    display: flex;
    justify-content: center;
}

检查这个小提琴，我分叉你的，并添加了一些flexbox属性。

http://jsfiddle.net/yvw6w4q8/

Answer 5

如果.imageContainer和.images的大小是固定的，可以这样做：

.image {
    width: 150px;
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
    display: inline-block;
}

.imageContainer {
    width:665px;
    border:1px solid #666;
    text-align: center;
}


.image:nth-child(3n+2) {
    margin: auto 70px;
}

http://jsfiddle.net/3665j5vg/

Answer 6

我会使用更强力（但更有防弹）的方法如下。

按如下方式修改HTML：

<div class="imageWrap">
    <div class="image">
        <div class="delete">
            <img class="thumbnail" src="http://i.imgur.com/mHg4A13.jpg">
               <i class="icon-remove white"></i>
        </div>
    </div>
</div>

在每张图片周围添加.imageWrap元素。

对于CSS：

.image {
    -moz-box-sizing: border-box;
    border: 1px solid #DDDDDD;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
    display: inline-block;
    height: 150px;
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
}
.imageWrap:nth-child(3n+1) {
    text-align: left;
}
.imageWrap:nth-child(3n+2) {
    text-align: center;
}
.imageWrap:nth-child(3n+0) {
    text-align: right;
}
.imageWrap {
    overflow: auto;
    float: left;
    width: 33.33333%;
}

将display: inline-block应用于.image，保留图像边框样式。

对于.imageWrap，将float: left应用于此元素并将宽度设置为33.333％。

对于.imageWrap的第n个孩子，根据需要使用text-align left / center / right，你的.image是一个内嵌块，你得到了你想要的对齐方式。

这也适用于每行1和2张图像。

请参阅演示：http://jsfiddle.net/audetwebdesign/by1db6b6/

Answer 7

您可以尝试将不同的选择器串联在一起以创建子分组：JSFIDDLE DEMO 我使用绝对定位来完成您的布局目标，但像.image:nth-child(3n+0):nth-child(2n+0)这样的子选择器可以很容易地与其他布局选项一起使用。

.image:nth-child(3n+1) {
    left:0;
}

.image:nth-child(3n+2) {
    left: 50%;
    margin-left: -86px;
}

.image:nth-child(3n+0) {
    right: 0;
}

.image:nth-child(3n+1):nth-child(2n+0) {
    left:0;
    top: 180px;
}

.image:nth-child(3n+2):nth-child(2n+0) {
    left: 50%;
    top: 180px;
    margin-left: -86px;
}

.image:nth-child(3n+0):nth-child(2n+0) {
    right: 0;
    top: 180px;
}
/* changed positioning to absolute */
.image {
    -moz-box-sizing: border-box;
    border: 1px solid #DDDDDD;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
    float: left;
    height: 150px;
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
    position: absolute;
}

使用nth-child时将div放在另一个div中

7 个答案: