html - 使用与 flex 对齐

Question

我想在 div 元素中使用 align 的属性。但是因为我已经给这个元素和父元素都赋予了 flex 属性，所以 align 不起作用。

有什么可以替代的？

标签： htmlcss

Answer 1

由于您已经flex为父元素和子元素添加了属性，因此您可以使用align-itemsandjustify-content属性来对齐子元素。

这是flexbox 的完整指南。

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width:400px;
  height:400px;
  border: dashed 2px black;
}

.box div {
  display: flex;
   width:200px;
  height:200px;
  justify-content: center;
  align-items: center;
  border: solid 2px black;
}

.box div p{
  display: flex;
  width: 100px;
  height: 100px;
  border: dotted 2px black;
}
      

<div class="box">
  <div>
    <p></p>
  </div>
</div>