如何在另一個具有100％寬度的div中居中div？

我該如何水平居中在另一個具有100％寬度的div內的div？如何在另一個具有100％寬度的div中居中div？

#conteudo{ 
 
    padding-top: 30px; 
 
    width: 100%; 
 
    background: #fff7db url(../_img/content-border.jpg) repeat-x ; 
 
    min-height: 1080px; 
 
    padding-bottom: 10px; 
 
} 
 

 
#principal{ 
 
    width: 50%; 
 
    margin: 0 auto; 
 
}

<div id="conteudo"> 
 
    <section id="principal"> 
 
     <img src="_img/summer-nymph.png" alt="summer-nymph.png"> 
 

 
     <p> 
 
      Nullam sed magna mattis, posuere enim nec, fermentum risus. 
 
      Aenean diam massa, condimentum id urna in, porta laoreet tortor. 
 
      Duis tempus vitae risus nec hendrerit. Fusce euismod ligula id erat dignissim, 
 
      nec viverra ante condimentum. Phasellus sollicitudin tincidunt lectus id luctus. 
 
     </p> 
 
    </section> 
 
    </div>

我想水平居中div#principal內div#conteudo但我的代碼是行不通的。

來源

2016-06-30 Matheus Cirillo

它不是已經居中？ – slashsharp

@slashsharp no。它不起作用 –

在你的代碼片段中，ALREADY爲中心。所以你需要檢查你的風格。或者您可以向我們展示完整的HTML和CSS代碼。 –

您當前的代碼水平居中。如果你真的想要它水平居中，那麼在你沒有發佈的代碼行中肯定有錯誤。一個常見的錯誤將是一個錯誤的鏈接到您的CSS文件。我多次犯了這個錯誤，所以我建議你檢查你的鏈接標籤到你的HTML代碼頭部的CSS文件
如果它不是你的鏈接標籤，那麼你需要發佈整個代碼以獲得進一步的幫助。

我誤解了問題的早些時候（混合了水平和垂直），但我仍想在離開這一點，因爲它可能是有益的，它可以幫助你未來的中心問題：
您也可以中心一個div用CSS Flexbox的佈局模式
這裏是它看起來像一個片段：

#conteudo { 
 
    padding-top: 30px; 
 
    width: 100%; 
 
    background: #fff7db url(../_img/content-border.jpg) repeat-x ; 
 
    min-height: 1080px; 
 
    padding-bottom: 10px; 
 

 
    /* 
 
    Center a div horizontally and vertically with the flexbox 
 
    If you only want it centered in one direction, just remove 
 
    the other property 
 
    */ 
 
    display:flex; 
 
    justify-content:center; /* horizontal center */ 
 
    align-items:center; /* vertical center */ 
 
} 
 

 
#principal{ 
 
    width: 50%; 
 
}

<div id="conteudo"> 
 
    <section id="principal"> 
 
     <img src="_img/summer-nymph.png" alt="summer-nymph.png"> 
 

 
     <p> 
 
     Nullam sed magna mattis, posuere enim nec, fermentum risus. 
 
     Aenean diam massa, condimentum id urna in, porta laoreet tortor. 
 
     Duis tempus vitae risus nec hendrerit. Fusce euismod ligula id erat dignissim, 
 
     nec viverra ante condimentum. Phasellus sollicitudin tincidunt lectus id luctus. 
 
     </p> 
 
     
 
    </section> 
 
</div>

但是這個解決方案行不通的非常古老的瀏覽器（IE 9及以上版本），但幾乎適用於所有現代瀏覽器。 flexbox仍然是一個非常好的CSS佈局模式。我真的建議看看它。
你可以看看這個鏈接到flexbox指南： Flexbox Guide

來源

2016-06-30 04:03:55 alphaClass

如何在另一個具有100％寬度的div中居中div？

回答

相關問題