html - 水平对齐内联 block

Question

我有一个 div 元素，它具有 inline-block 显示属性。我想将它与下一个代码水平对齐，但它不起作用。

div {
  display: inline-block;
  border: 3px solid red;
  margin: auto;
}

<div>
  <p>This is a random text</p>
</div>

Answer 1

有几种方法可以做到这一点。最快的方法是将 margin: auto; 替换为:

margin-left: 50%;
transform: translateX(-50%);

这会将它相对于其父项向右推 50%，然后向左推 50%(相对于自身)，因此它完美居中。

另一种方法，如果你愿意完全改变 CSS，就是用这个替换你所有的 CSS:

div {
    text-align: center;
}
p {
    border: 3px solid red;
    padding: 15px 0;
    display: inline-block;
}

这几乎将 div 中的所有代码移至 p，然后将 text-align: center; 应用于父级div，表示div内的每个元素都居中。