[英]Aligning a div to the center with display: inline-block
我有一个样式display: inline-block
为div
的行display: inline-block
用于使div自动扩展到其内容。
div
不会使用margin: 0 auto;
居中margin: 0 auto;
。 为了解决这个问题,我将元素的样式更改为display: block
和width: 100px
,它居中。
我如何居中使用display: inline-block
的div
元素居中?
ul { list-style: none; margin: 0px; padding: 0px; }
<div style="margin: 0 auto; display: inline-block;"> <ul> <li>Example</li> <li>Example</li> <li>Example</li> </ul> </div>
JsFiddle: https ://jsfiddle.net/8xz0sze6/2/
添加body {text-align:center;}
以使div在页面上居中。
或者,您可以将此div包裹在另一个div中,宽度为100%,文本居中对齐。
我假设您正在谈论水平对齐。 然后,您需要父容器具有text-align:center(和适当的宽度),以使自动边距技巧起作用:
<div style="text-align:center;width:100%">
<div style="margin: 0 auto; display: inline-block;">
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</div>
</div>
这样的东西?
<div class="center" style="margin: 0 auto; display: inline-block;text-align:center;">
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</div>
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
ul li {
display: inline;
}
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.