将一个元素居中于另一个元素上方[重复]

Question

努力将我的icon 居中放置在文本上方，图标的高度很好，但应该像这样：

尝试使用 flex 但找不到正确的解决方案。

.container {
  display: block;
  width: 400px;
  height: 100px;
  border: 2px solid black;
}

.icon {
  width: 30px;
  height: 30px;
  background-color: red;
}

.text {
  text-align: center;
}

<div class="container">
  <div class="icon"></div>
    <p class="text">We couldn't find any matches to your search. <br></br>Please try again.</p>
</div>  

Answer 1

你可以使用 CSS flexbox: 但记住默认方向是row。如果你切换到flex-direction: column，那么你将实现你想要的：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 400px;
  height: 100px;
  border: 2px solid black;
}

.icon {
  width: 30px;
  height: 30px;
  background-color: red;
}

.text {
  text-align: center;
}

<div class="container">
  <div class="icon"></div>
    <p class="text">We couldn't find any matches to your search. <br />Please try again.</p>
</div>