如何使用CSS并居中放置三个元素

Question

I'm pretty new to css and web development and I want to create a new pwa using react and I need a header with one I'mage on the left, a centered text in the center and another I'mage on the right of this header. So good so far, I can't successfully place them next to each other but I can't do it in a responsive way. It means, when I inspect with chrome and swap the landscape from vertical to horizontal, the text which should be in the center moves a bit to the left. I know it's my code but I don't know how to fix this issue and how to make this think responsive.

I guess the problem is in .headerApp p , that I do the margin left here. is there any way to display it on the center without needing any margins?

Here is my html code:

 .headerApp { background-color: #57628d; height: 4rem; border-style: solid; } .headerApp .backButton { width: 36px; height: 36px; float: left; margin-top: 0.9rem; margin-bottom: 2%; margin-left: 1rem; } .headerApp p { color: white; float: left; width: 50%; position: relative; font-family: "Ubuntu"; font-weight: normal; font-size: 32px; margin-top: 0.8rem; margin-left: 10%; } .headerApp .toProfile { width: 44px; height: 44px; float: right; margin-right: 1rem; margin-top: 0.5rem; } 

 <header className="headerApp"> <img className="backButton" src={require( "../assets/back.png")} alt="back button" /> <p>Fahrt nach</p> <img className="toProfile" src={require( "../assets/Profil.png")} alt="go to own profile" /> </header> 

Answer 1

You can use grid to achieve this

 .headerApp{ display:grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: column; } 

 <header class="headerApp"> <img class="backButton" src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=650&w=940" alt="back button" height="40px" width="40px" /> <p>Fahrt nach</p> <img class="toProfile" src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=650&w=940" alt="go to own profile" height="40px" width="40px" /> </header>` 

Using Flexbox you can do it like this

 .headerApp{ display: flex; justify-content: space-between; } 

 <header class="headerApp"> <img class="backButton" src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=650&w=940" alt="back button" height="40px" width="40px" /> <p>Fahrt nach</p> <img class="toProfile" src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=650&w=940" alt="go to own profile" height="40px" width="40px" /> </header>` 

Answer 2

 .content { text-align: center; color:black; font-size: 45px; height: 60px; width: 100%; border: 3px solid black; position: sticky; background-image: url("bg2.jpeg"); } 

 <header> <div class="content"> <span>HOME</span> <span>ABOUT</span> <span>CONTACT</span> <span><img src="sett.jpg" height=60px; width=60px; align="right"></span> <span><img src="bg1.jpeg" height=60px; width=60px; align="left"></span> </div> </header> 

You can add the header content in the center and two images one to the left and the other to the right.