水平对齐行内块元素

Question

我正在努力实现以下目标：

1. 我尝试让 div 显示为 inline-block 和剩余的 宽度（空格）应均匀分布在 div 周围（如 带边距：自动）。

2. 我尝试让 div 顶部而不是底部边框与每个边框对齐 其他，为下面的任何 div 保留指定的边距顶部和底部 或根据它的高度在彼此之上。就像图片一样 附上

(https://i.stack.imgur.com/Y3Jwl.jpg)

[例如：see codepen] css：

#container {
  min-height: 200px;
  margin: 0;
  padding: 10px;
  border: 2px solid green;
}

#container div {
  border: 2px solid red;
  padding: 10px;
  display: inline-block;
  /* must be inline-block, not BLOCK */
  margin: 5px auto;
  /* AUTO works fine if set to display:block; and not display:inline-block; */
  width: 120px;
  /* the longer the item name, the width should auto expand to fit */
  margin: 2px auto;
}

<section id="container">
  <div>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three </li>
      <li>Item four</li>
      <li>Item five</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three </li>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six </li>
      <li>Item seven</li>
      <li>Item eight</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three </li>
      <li>Item four</li>
      <li>Item five</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three </li>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six </li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three </li>
      <li>Item four</li>
      <li>Item five</li>
    </ul>
  </div>

</section>

Answer 1

对于内联块项目，您可以使用vertical-align: top 将同级对齐到顶部。

对于等间距的宽度，您可以在 #container div 内定义宽度值百分比，或告诉父 #container 为 display: flex（这也将使项目与顶部对齐）。

#container{
  min-height: 200px;
  margin:0;
  padding:10px;
  border:2px solid green;
}
#container div {
  border:2px solid red;
  padding:10px; 
  display: inline-block;
  margin:5px auto;
  width:120px;
  margin:2px auto;
  vertical-align: top; /* use on inline-items */
}

<section id="container">
    <div>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three </li>
            <li>Item four</li>
            <li>Item five</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three </li>
            <li>Item four</li>
            <li>Item five</li>
            <li>Item six </li>
            <li>Item seven</li>
            <li>Item eight</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three </li>
            <li>Item four</li>
            <li>Item five</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three </li>
            <li>Item four</li>
            <li>Item five</li>
            <li>Item six </li>
        </ul>
    </div>
    <div>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three </li>
            <li>Item four</li>
            <li>Item five</li>
        </ul>
    </div>

</section>

Answer 2

Margin:0 自动属性适用于块级元素，以防您想将块级元素内的任何块级元素居中。

---

1:) 您要居中的块级元素应具有定义的高度，否则 Margin:0 auto 将不起作用。

---

2:) 您可以使用 text-align 将 inline-block 或 inline 元素居中：在父容器中居中作为父元素，将子元素视为文本。

在您的情况下，您已将#container div 定义为 inline-block 所以

margin：用户定义的自动；

不会工作，因为它不再是块级元素虽然你已经定义了一个宽度，但它不会工作。尝试在 parent 中使用 text-align 属性。希望问题得到解答