CSS div包含類

所以我的Div ID和類的邏輯必須關閉。CSS div包含類

繼承人怎麼回事：

enter image description here

正如你可以看到這不能不PS塊不對齊中心與滑塊（這是一個容器內

這裏是我的CSS ：

/*Front Page Buttons */ 

#frontpage-Button-Cont { 

    height: 350px; 

} 

.button-cont { 
    width: 175px; 
    float: left; 
    margin-left: 10px; 
    margin-top: 10px; 
    height: 250px; 
} 

.thumbnail { 
    color: #fff; 
    font-size: 5em; 
    background: #1f4e9b; 
    width: 175px; 
    height: 135px; 
    text-align: center; 

} 
.pheader { 
    color: #DC143C; 
    min-width: 175px; 
    text-align: center; 


} 
.paragraph { 
    text-align: center; 
} 

#Align-content { 
    margin: 0 auto; 
}

這裏是HTML：

<div id="frontpage-Button-Cont"> 
    <div id="Align-content"> 
     <div class="button-cont"> 
      <div class="thumbnail"> 
       PS 
      </div> 

      <div class="paragraph"> 
       <div class="pheader"> 
        HEADER 
       </div> 

       <p>dadaasdasdadadad 
      </div> 
     </div> 

     <div class="button-cont"> 
      <div class="thumbnail"> 
       PS 
      </div> 

      <div class="paragraph"> 
       <div class="pheader"> 
        HEADER 
       </div> 

       <p>dadaasdasdadadad 
      </div> 
     </div> 

     <div class="button-cont"> 
      <div class="thumbnail"> 
       PS 
      </div> 

      <div class="paragraph"> 
       <div class="pheader"> 
        HEADER 
       </div> 

       <p>dadaasdasdadadad 
      </div> 
     </div> 

     <div class="button-cont"> 
      <div class="thumbnail"> 
       PS 
      </div> 

      <div class="paragraph"> 
       <div class="pheader"> 
        HEADER 
       </div> 

       <p>dadaasdasdadadad 
      </div> 
     </div> 
    </div> 
</div>

我的理論是我錯誤地使用類？

謝謝。

來源

2013-10-31 Bradly Spicer

所以你想對齊所有按鈕的中心這一頁？ – 2013-10-31 15:28:18

另請嘗試應用文本對齊：中心到＃對齊內容 – 2013-10-31 15:30:23

在我看來，你在任何地方使用div的類，而你應該瞄準正確的元素。這裏有一個小例子：http://jsfiddle.net/7u32f/2/ –

您可以添加到您的CSS

#frontpage-Button-Cont { 
    width:100%; 
} 

#Align-content { 
    display:table; 
}

有了這個你margin:o auto可以工作

查看示範http://jsfiddle.net/VGPeW/

來源

2013-10-31 15:32:19 DaniP

非常感謝 –

歡迎您使用得非常好所有您錯過的課程都是您的容器 – DaniP

您需要確保包含div（本例中爲frontpage-Button-Cont）的寬度與其上面的滑塊相同。然後將該屬性text-align:center添加到容器。那應該修復你的問題。

來源

2013-10-31 15:31:24

不幸的是，這個選項對我來說並不適用。感謝您的努力，但丹科成功地回答了它:) –

回答

相關問題