-1

I'm pretty new to html/css and I've looked around for hours but can't seem to make these images line up side by side. My idea is to make a lobby for a game and I want to display all of the players side by side along with their names below them, although all I ask is how to get these images to line up horizontally. Then I will worry about putting text beneath them later. HTML:

  <div class= = "container">
<div class = "row">
  <div class = "column" id = "player1" style = "visibility:visible" >
    <img src = "PlayerPicture.png" style = "width:auto">
  </div>
  <div class = "column" id = "player2" style = "visibility:visible" >
    <img src = "PlayerPicture.png" style = "width:auto">
  </div>
  <div class = "column" id = "player3" style = "visibility:visible" >
    <img src = "PlayerPicture.png" style = "width:auto">
  </div>
  <div class = "column" id = "player4" style = "visibility:visible" >
    <img src = "PlayerPicture.png" style = "width:auto">
  </div>
  <div class = "column" id = "player5" style = "visibility:visible" >
    <img src = "PlayerPicture.png" style = "width:auto">
  </div>
</div>

How the image looks with the code above

Danny Le
  • 9
  • 1
  • `.column{ float: left; width: 33.33%; padding: 5px; } .row::after{ content: ""; clear: both; display: table; }` Im not sure how to post more code, this is my css right here. Thank you to anyone in advanced! – Danny Le Mar 22 '22 at 03:56
  • Does this answer your question? [Centering multiple images horizontally with flexbox](https://stackoverflow.com/questions/34685417/centering-multiple-images-horizontally-with-flexbox) – Rob Mar 22 '22 at 13:26

1 Answers1

0

please try to add this code in your CSS might work for you

.row { display: flex;}

Ravi Dhingra
  • 25
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 22 '22 at 04:18
  • omg thank you so much! This took me like 6 hours of researching and I can't believe this is all it took. Much love! – Danny Le Mar 22 '22 at 09:49