Question

我对CSS和Web开发还很陌生，我想使用react创建一个新的pwa，我需要一个标头，一个标头在左侧，中间居中，另一个在标头上。此标题的右侧。到目前为止，到目前为止，我还不能成功地将它们彼此并排放置，但是我无法以响应方式进行。这意味着，当我使用chrome进行检查并将景观从垂直变为水平时，应在中间的文本向左移动一点。我知道这是我的代码，但我不知道如何解决此问题以及如何使此问题响应。

我猜问题出在.headerApp p，我在这里留了边距。有什么方法可以在不需要任何边距的情况下在中心显示它？

这是我的html代码：

.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

您可以使用grid来实现

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

使用Flexbox，您可以这样做

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

您可以在标题的中央添加内容，并在左侧添加两个图像，在右侧添加两个图像。

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

2 个答案: