Как разместить три элемента рядом друг с другом, используя CSS и по центру - PullRequest
Новая
       4

Как разместить три элемента рядом друг с другом, используя CSS и по центру

0 голосов
/ 03 января 2019

Я довольно новичок в css и веб-разработке, и я хочу создать новый pwa, использующий реагирование, и мне нужен заголовок с одним я изображением слева, центрированным текстом в центре и другим я изображением насправа от этого заголовка.Пока все хорошо, я не могу успешно разместить их рядом друг с другом, но не могу сделать это быстро.Это означает, что когда я проверяю хром и меняю ландшафт с вертикального на горизонтальный, текст, который должен находиться в центре, немного смещается влево.Я знаю, что это мой код, но я не знаю, как решить эту проблему и как заставить это думать реагировать.

Я предполагаю, что проблема в .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>

Ответы [ 2 ]

0 голосов
/ 03 января 2019 

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

Вы можете добавить содержимое заголовка в центре и два изображения, одно слева, а другое справа.

0 голосов
/ 03 января 2019

Вы можете использовать сетку для достижения этого 

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