如何在 flex box 中居中 h6 标签

Question

我无法在 flex div 中将 h6（或任何）标签水平居中。我想我已经尝试了所有 CSS 对齐、对齐等方法，但没有任何效果！

我只想放置一个 div 大小的 80%，然后在里面放文字，有那么难吗？

[编辑] 通过在父 div css.

中添加 margin 0 auto（不要忘记 auto）来解决

div {
  display: flex; 
  align-items: center; 
  align-self: center; 
  justify-content: center; 
  width: 80%;
}

#n{border: 1px solid coral}
#y{border: 1px solid green}
h6{border: 1px solid blue}

<div id="n">
  <h6>I won't align >:(</h6>
</div>
<br>
<div style="margin: 0 auto;" id="y">
  <h6>I do align :)</h6>
</div>

Answer 1

那是因为父 div 容器没有居中。

为父 div 设置 margin: auto 以将其置于中心。

<div style="margin: auto; display: flex; align-items: center; align-self: center; justify-content: center; justify-self: center; width: 80%;">
  <h6>I won't alignnnnnn</h6>
</div>

Answer 2

将margin: 0 auto;添加到div:

<div style="display: flex; align-items: center; align-self: center; justify-content: center; justify-self: center; width: 80%; margin: 0 auto;">
    <h6>I am aligneeeeddd</h6>
</div>

代码笔：https://codepen.io/manaskhandelwal1/pen/jOVNwmd

Answer 3

您可以查看以下代码段。我使用 css 的边框属性并检查 parent div 和 child h6 在哪里。检查后，您的 css 代码工作正常，但如果您希望 parent div 也应该位于中心，则您需要添加 margin: 0 auto; 在 parent div.

<div style="display: flex; align-items: center; justify-content: center; width: 80%; border: 1px solid red;"><h6 style="border:1px solid blue;">h6 tag --- I am in center</h6></div>

如何在 flex box 中居中 h6 标签

How to center h6 tag inside flex box

html

css

alignment