在下面的代碼中,如何自動將父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>
你已經漂浮了所有這些div。對中沒有什麼意義,「堵在右邊,但不堵塞 - 進入中線」。 – 2014-08-29 14:47:47
@MarcB世界上這是什麼意思? – Norman 2014-08-29 14:50:49
在第二行有兩個圖像的情況下,您想如何定位最右側(第二個)圖像? – 2014-08-29 14:57:24