以無邊距爲中心的東西

是否可以在不使用邊距的情況下居中：auto;？我的div不能是一個設定的大小，因爲寬度會根據其內容而改變，即使如此，我也不知道它會有多寬，因爲它裏面的文本（因爲有多個<p>的文本，所以文本有一個div）。如果不知道對象的寬度，是否有其他方法可以在中心對齊？以無邊距爲中心的東西

div#contents { 
 
\t display: inline-block; 
 
\t margin: 50px 100px 50px 100px; 
 
\t border: 3px solid black; 
 
} 
 

 
table#socialmedia { 
 
\t height: 100px; 
 
\t margin-top: 10px; 
 
\t float: left; 
 

 
} 
 

 
table#support { 
 
\t height: 25px; 
 
\t margin-top: 10px; 
 
\t float: left; 
 

 
} 
 

 
table#external { 
 
\t margin-top: 10px; 
 
\t float: left; 
 

 
} 
 

 
div#footerdivider { 
 
\t width: 1px; 
 
\t height: 120px; 
 
\t margin: 0px 50px 0px 50px; 
 
\t background-color: #424242; 
 
\t float: left; 
 
} 
 

 
p.footerlinks { 
 
\t font-size: 20px; 
 
\t color: #8C8CFF; 
 
\t text-align: center;

<div id="contents"> 
 
\t <table id="socialmedia"> 
 
\t \t <tr><td><a href=""><p class="footerlinks">Facebook</p></a></td></tr> 
 
\t \t <tr><td><a href=""><p class="footerlinks">Twitter</p></a></td></tr> 
 
\t \t <tr><td><a href=""><p class="footerlinks">YouTube</p></a></td></tr> 
 
\t \t <tr><td><a href=""><p class="footerlinks">Steam</p></a></td></tr> 
 
\t </table> 
 
\t <div id="footerdivider"> 
 
\t </div> 
 
\t <table id="support"> 
 
\t \t <tr><td><a href=""><p class="footerlinks">Email Us (Click to copy)</p></a></td></tr> 
 
\t </table> 
 
\t <div id="footerdivider"> 
 
\t </div> 
 
\t <table id="external"> 
 
\t </table> 
 
</div>

來源

2015-09-17 Lion

你想要居中哪個元素？ – crazymatt

試試這個 - [以CSS爲中心：一個完整的指南]（https://css-tricks.com/centering-css-complete-guide/）和[用於定位DIV的完整指南]（http：// www。 tipue.com/blog/center-a-div/） –

可能的重複[在div中水平居中div]（http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a -div）（這篇文章提出了一系列解決方案，其中許多不涉及'margin：0 auto'） –

若要中心對齊項目而不是使用margin: 0 auto;，如果您正在使用的瀏覽器支持它，則可以使用flexbox。

考慮下面的代碼片段;

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 5px 0; 
 
} 
 
.item { 
 
    background-color: red; 
 
    border: 1px solid black; 
 
}

<div class="container"> 
 
    <div class="item">Lorem ipsum dolor sit amet.</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="item">Praesent ultrices nec quam at blandit. Pellentesque elementum ullamcorper lobortis.</div> 
 
</div>

有超過@ css-tricks.com上Flexbox的好文章，你可以檢查出here。

希望能幫助你！

來源

2015-09-17 23:34:23 jh3y

乾杯人，作品！ – Lion

I'think如果您設定的邊距爲自動。它通常在水平工作。

div { 
     margin: auto; 

}

來源

2015-09-17 23:22:47 moongom

嘗試

div.your_element { 
 
    display: table; 
 
    margin: 0 auto; 
 
}

顯示：表（居中的流體格:)

餘量：0汽車（居中表）

來源

2015-09-17 23:25:33 Biboy

以無邊距爲中心的東西

回答

相關問題