Question

我有div样式display: inline-block - 这用于使div自动扩展为其内容。

div不会使用margin: 0 auto;居中。为了解决这个问题，我将元素的样式更改为display: block和width: 100px，它确实居中。

如何使用div的<{1}}元素居中？

display: inline-block

ul {
 list-style: none;
 margin: 0px;
 padding: 0px;
}

JsFiddle：https://jsfiddle.net/8xz0sze6/2/

Answer 1

添加<input>以使div居于页面上。

或者你可以将这个div包装在另一个宽度为100％且文本对齐中心的div中。

Answer 2

我假设你在谈论水平对齐。然后你需要父容器使用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>

https://jsfiddle.net/6ygqqko3/

Answer 3

类似的东西？

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

https://jsfiddle.net/DlanorJQ/x0mx6efz/

使用display：int in-block将div与中心对齐

3 个答案: