在使用子nth时在另一个div内居中div

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

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

来源

2014-08-29 Norman

你已经漂浮了所有这些div。对中没有什么意义，“堵在右边，但不堵塞 - 进入中线”。 – 2014-08-29 14:47:47

@MarcB世界上这是什么意思？ – Norman 2014-08-29 14:50:49

在第二行有两个图像的情况下，您想如何定位最右侧（第二个）图像？ – 2014-08-29 14:57:24

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

这里的MDN链接，我希望你会帮助你。

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

问候

来源

2014-08-29 14:52:34 Paulquappe

我的确尝试过，但问题有时候可能会少于3张图片，所以第二张图片会一直漂浮在正确的位置。 – Norman 2014-08-29 14:54:09

这里是一个快速解决您的问题。在.row div中包装3张图像，并将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

来源

2014-08-29 15:01:23 karan3112

嗯...在Chrome中可以正常工作，但是Firefox有问题 – Norman 2014-08-29 15:08:00

在Firefox中计算的宽度为150px。看到更新的CSS。 – karan3112 2014-08-29 15:19:45

如果从所有图像

.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; 
}

一个删除float:left第二则定义相似图片：

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

来源

2014-08-29 15:14:37 greenish

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

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

对于我个人理解，你想实现是有

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

入住这拨弄一下，我叉你，并增加了一些Flexbox的性质。

http://jsfiddle.net/yvw6w4q8/

来源

2014-08-29 15:18:54

如果.imageContainer和。图像大小是固定的它可以这样做：

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

来源

2014-08-29 15:21:39

您可能希望将.imageContainer宽度更改为偶数（664或666等）以很好地将内容居中。 – 2014-08-29 15:33:14

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

修改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 /中/右根据需要，自你.image是inline-block的，你得到你想要的对齐方式。

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

在观看演示：http://jsfiddle.net/audetwebdesign/by1db6b6/

来源

2014-08-29 15:35:35

您可以尝试串起了不同的选择，共同创建子分组：JSFIDDLE DEMO 我用绝对定位acomplish布局的目标，但子选择像.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; 
}

来源

2014-08-29 15:38:20 JRulle

在使用子nth时在另一个div内居中div

回答

相关问题