Question

是否可以在不使用保证金的情况下居中：auto;？我的div不能是一个设置的大小，因为宽度会根据它的内容而改变，即使如此我也不知道它的文本里面有多宽（因为有多个<p>的文本有一个div ）。在不知道物体宽度的情况下，是否还有其他在中心对齐的方法？

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

尝试

＆＃13;

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

＆＃13;

display：table（以流体div为中心：）

保证金：0自动（到中心表）

Answer 2

要将项目居中对齐而不使用margin: 0 auto;，您可以使用flexbox，如果您使用的浏览器支持它。

考虑以下代码段;

＆＃13;

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

＆＃13;

<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>

＆＃13;

在@ css-tricks.com上有一篇关于flexbox的好文章，你可以查看here。

希望能帮到你！

Answer 3

我认为您将保证金设置为自动。它通常在横向上工作。

div {
      margin: auto;

}

无边距地居中

3 个答案: