在使用子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

回答

相關問題