水平对齐行内块元素

Question

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

我尝试让 divs 显示为内联块，其余的宽度（空格）应均匀分布在 div 周围（如边距：自动）。
我尝试让 divs TOP 而不是 BOTTOM 边框与每个边框对齐其他，为下面的任何 div 保留指定的顶部和底部边距或基于其高度彼此之上。就像图片一样附

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

#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 auto 属性适用于块级元素，以防您想将任何块级元素置于块级元素的中心。

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

2 :) 您可以使用 text-align: center in parent container as parent treat child element like text.

在您的情况下，您已将 #container div 定义为内联块，因此

margin: user-defined auto;

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

水平对齐行内块元素

Aligning inline-block elements horizontally

html

css

margin

display