如何在div div中居中div

我遇到了設置我的佈局的問題，元素沒有對齊我想要的方式，並且我的想法用完了，或者重複了同樣的錯誤。如何在div div中居中div

這是適合其大小的頁面寬度，容器，我想中心（藍色）收縮或擴大取決於頁面寬度，然後矩形元素（棕色），我想要在容器中心（藍），並允許它們根據容器的寬度重新排列（大小和數量是不恆定的）

HTML

<div id="tiles_wrap"> 
    <div id="tiles"> 
     <div class="tilewrap"> 
      <div class="tilebg"> 
       <div class="ribbon">aaab</div> 
      </div> 
     </div> 
     <div class="tilewrap"> 
      <div class="tilebg"> 
       <div class="ribbon">aaav</div> 
      </div> 
     </div> 
     <div class="tilewrap"> 
      <div class="tilebg"> 
       <div class="ribbon">aaaa</div> 
      </div> 
     </div> 
     <div class="tilewrap"> 
      <div class="tilebg"> 
       <div class="ribbon">bbbv</div> 
      </div> 
     </div> 
    </div> 
</div>

CSS

#tiles_wrap { 
    width: 100%; 
    display:block; 
    position: relative; 
    background-color: rgba(0, 255, 0, 0.3); 
    float: left; 
    padding-left:25%; 
    padding-right:25%; 
} 
#tiles { 
    margin: 0 auto; 
    height: 100%; 
    display:block; 
    float: center; 
    Padding: 40px; 
    line-height: 0.7em; 
    font-size: 12px; 
    background-color: rgba(0, 0, 255, 0.3); 
} 
.tilewrap { 
    padding: 5px; 
    float: left; 
} 
.tilebg { 
    height: 55px; 
    width: 70px; 
    background-color: brown; 
    display:block; 
    position: relative; 
    float:left; 
} 
.ribbon { 
    color: #fff; 
    padding:2px; 
    background-color: rgba(255, 0, 0, 0.5); 
    display:block; 
    position: absolute; 
    z-ndex: 22; 
}

在此先感謝fr全部幫助！

來源

2013-11-26 MoreThanChaos

你不能使用float這個，沒有float: center;所以這是你的問題之一。另外，絕對定位元素往往會將它們固定在特定的位置，因此根據容器的寬度，它們不太適合居中和重新排列。

但是，您可以使用display: inline-block;以及text-align: center;來做你正在做的事情。

而且，不要忘記，如果你設置的目的是100%的寬度，然後在左側和右側添加25%填充，你這是其父的那個對象150%的總寬度（正常content-box模型。）

http://jsfiddle.net/UQ34L/1/

來源

2013-11-26 03:09:03 Ming

要讓藍色居中，您需要爲#tiles設置寬度，然後從#tiles_wrap中刪除填充。沒有float：center這樣的東西，所以被忽略。

來源

2013-11-26 03:08:44

試試這個

#tiles_wrap { 
      width: 100%; 
      display: block; 
      background-color: rgba(0, 255, 0, 0.3); 
      float: left; 
} 

#tiles { 
     width: 65%; 
     margin: 0 auto; 
     Padding: 40px; 
     font-size: 12px; 
     background-color: rgba(0, 0, 255, 0.3);}

來源

2013-11-26 03:14:43 stanze

試試這個 JSFiddle

正如其他人所建議的，我添加了display：inline-block來讓div坐在一起。除此之外，我還添加了一個id =「wrapper」的包裝div，並應用了一個text-align：center使瓷磚在中心對齊。

此外，我添加了一個id爲「tiles_left」的div，寬度爲30％，並且刪除了「tiles_wrap」div，因爲它對於我所做的更改並不需要。寬度爲70％的「瓷磚」div

<div id="tiles_left"> 
    hello 
</div> 
<div id="tiles"> 
<div id="wrapper"> 
<div class="tilewrap"> 
    <div class="tilebg"> 
     <div class="ribbon">aaab</div> 
    </div> 
</div> 
<div class="tilewrap"> 
    <div class="tilebg"> 
     <div class="ribbon">aaav</div> 
    </div> 
</div> 
<div class="tilewrap"> 
    <div class="tilebg"> 
     <div class="ribbon">aaaa</div> 
    </div> 
</div> 
<div class="tilewrap"> 
    <div class="tilebg"> 
     <div class="ribbon">bbbv</div> 
    </div> 
</div> 
</div>

來源

2013-11-26 03:31:40 autowired

如何在div div中居中div

回答

相關問題