无边距居中

Question

是否可以在不使用 margin: auto; 的情况下将某些内容居中？我的 div 不能设置大小，因为宽度会根据它的内容而改变，即使如此我也不知道它会有多宽，因为它里面是文本（文本周围有一个 div 因为有多个 <p>）。在不知道物体宽度的情况下，是否有任何其他居中对齐方式？

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

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

}

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

}

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

}

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

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

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

Answer 1

我想如果您将边距设置为自动。它通常在水平方向上工作。

div {
      margin: auto;

}

Answer 2

尝试

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

display: table (to center a fluid div:)

margin: 0 auto (to center tables)

Answer 3

要居中对齐项目而不使用 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。

希望对您有所帮助！

无边距居中

Centering something without margin

html

css

centering