Centring an element above another element

Question

struggling to centre my icon above the text, the height of the icon is fine but it should sit like so:

tried using flex but couldn't find the correct solution.

.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>

You haven't applied any centering to the icon. Put your text alignment on the parent element instead of just the text. — isherwood, Jan 18 '22 at 14:11

score 0 · Answer 1 · answered Jan 18 '22 at 14:12

0

You can use CSS flexbox: but remember that the default direction is row. If you switch it to flex-direction: column, then you will achieve what you want:

.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>

answered Jan 18 '22 at 14:12

Terry

63,248
15
96
118

1

Surely you know that this is a manifold duplicate. – isherwood Jan 18 '22 at 14:13
@isherwood None of the solutions you closed the question with uses `flex-direction: column` – Terry Jan 18 '22 at 14:14
1

Then consider adding that solution to the duplicate. The issue is still the same. – connexo Jan 18 '22 at 14:16
There are more questions using flex-direction:column that we don't really need here. margin:auto is enough – Temani Afif Jan 18 '22 at 14:19

Centring an element above another element

1 Answers1