水平对齐内联块元素

Question

水平对齐内联块元素

htmlcssmargindisplay

3

我想实现以下目标：

我尝试让 div 以 inline-block 形式显示，并且剩余的宽度（空格）应该均匀分布在 div 四周（就像使用 margin: auto）。
我尝试让 div 的顶部而不是底部边框对齐，同时为每个在其下方或上方的 div 留出指定的上下边距，根据其高度。就像所附图像一样。

(https://istack.dev59.com/Y3Jwl.webp)

[示例: 查看 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>

- KeleosWilliam

1

你还应该展示你的HTML代码，这样人们就可以轻松地测试和调试你的代码。 - undefined

谢谢Steph。这实际上是我的第一篇帖子，我很感激你的建议。这次我是通过CodePen来包含它的。下次将直接嵌入。 - undefined

vertical-align和text-align似乎是你在寻找的。https://codepen.io/gc-nomade/pen/KKPMMrL（已经说过了，是的），flex也可以做到这一点，而不涉及inline-block。 - undefined

2个回答

1

Margin:0 auto属性适用于块级元素，如果您想要将任何块级元素居中在另一个块级元素内部，则可以使用它。

1:) 如果您想要居中的块级元素没有定义高度，则Margin:0 auto将无法起作用。

2:) 您可以使用父容器中的text-align: center属性将inline-block或inline元素居中，因为父元素将子元素视为文本。

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

margin: user-defined auto;

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

- Furqan Anwar

将center;设置在父容器上，不仅仅会使内部div居中，还会使div的所有内容都居中。 - undefined

当您将:center设置为parent时，所有子元素都将被视为文本并居中显示。它不会居中子div内部的内容。 - undefined

这似乎相对地回答了我的第一个问题。有人能帮我解决第二个问题吗，这样div元素看起来就像我问题中的图片一样？谢谢 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- doppler · Accepted Answer

对于inline-block元素，您可以使用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>