-3

I have a parent and it has icons with text that I distributed using display: flex, but now the problem is. How do I make a block with icons in the center of the parent? I tried different ways that I found on the Internet, but they don't work as I understand because of display: flex

.icons {
  margin: auto 250px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
<div class="service">
  <div class="icons">
    <img src="#">
    <img src="#">
    <img src="#">
  </div>
</div>
Deepak Yadav
  • 6,804
  • 5
  • 31
  • 49
Punch Out
  • 1
  • 1
    "they don't work" is not a helpful problem statement. How don't they work? Any specific error messages? Unexpected behavior (describe)? – Robert Columbia Mar 31 '20 at 18:09

1 Answers1

-3

Your CSS value justify-content: space-between; was wrong for aligning it in center.

.icons {
  margin: auto 250px;
  display: flex;
  flex-direction: row;
  justify-content: center; /* you gave this wrong value */
  align-items: center;
}


/* Demo */

img {
  border: 1px solid #000;
}

.service {
  border: 1px solid red;
}
<div class="service">
  <div class="icons">
    <img src="https://via.placeholder.com/150" alt="">
    <img src="https://via.placeholder.com/150" alt="">
    <img src="https://via.placeholder.com/150" alt="">
  </div>
</div>
Deepak Yadav
  • 6,804
  • 5
  • 31
  • 49
  • Commenting on downvotes is absolutely [**not** required](https://meta.stackoverflow.com/questions/357436/why-isnt-providing-feedback-mandatory-on-downvotes-and-why-are-ideas-suggestin). But I suspect your answer was downvoted because it isn't clear how this solves the OP's problem (especially given that it isn't entirely clear what their problem is in the first place). – John Montgomery Mar 31 '20 at 19:49
  • The question was " How do I make a block with icons in the center of the parent?" - I added the answer. He's code was incorrect – Deepak Yadav Apr 01 '20 at 05:23