水平对齐内联块

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这就是诀窍：

:root {
  text-align: center;
}

:root {
  text-align: center;
}

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

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

Answer 2

有几种方法可以做到这一点。最快捷的方法是将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中的每个元素都居中。