Adding 3 Logos at the top of the screen-CodePudding

I'm new to HTML and trying to work on a practice project. What I'm stuck with is adding 3 logos at the top of the page 1 in the left 1 in the middle and 1 in the right. I tried to follow previous methods like using floats and flex method but I either end up with all the images side by side and can't move their positions or just one under an other ! How can I do that?

CodePudding user response：

First of all, welcome in the wonderful world of HTML !

Here's the HTML

<div >
 <img  src="yourlogo.png"/>
 <img  src="yourlogo.png"/>
 <img  src="yourlogo.png"/>
</div>

And the CSS...

.container {
 display: flex;
 justify-content: space-between;
 align-items: center
}

I can give you some ressources for learn Flexbox! Flex are wonderful and you can do a lot of cool things very easily

Flexbox introduction on CSS TRICKS

Flexbox froggy (little game for understanding flex's logic)

CodePudding user response：

You could use flex and justify-content to achieve this

<!DOCTYPE html>
<html>
<body>

<div style="display:flex; justify-content: space-between">

<img src="https://picsum.photos/100/50" />

<img src="https://picsum.photos/100/50" />

<img src="https://picsum.photos/100/50" />
</div>

</body>
</html>