0

введите сюда описание изображения

.cover {
  height: 757px;
  color: #fff;
  background-image: url(https://i.ibb.co/s6kGSxv/cover.jpg);
  background-size: cover;
}

.cover_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 530px;
  margin: 165px 50px 62px 50px;
}

.ono_tebe_nado {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.letter-spacing_60 {
  letter-spacing: 60px;
}

.letter-spacing_0 {
  letter-spacing: 0px;
}

.aligned-text {
  display: flex;
  font-weight: 700;
  font-size: 100px;
  line-height: 115%;
  letter-spacing: 30px;
  text-transform: uppercase;
}

.aligned-text_center {
  display: flex;
  align-self: center;
  font-weight: 700;
  font-size: 100px;
  line-height: 115%;
  letter-spacing: 30px;
  text-transform: uppercase;
}

.aligned-text_right {
  display: flex;
  align-self: end;
  font-weight: 700;
  font-size: 100px;
  line-height: 115%;
  letter-spacing: 30px;
  text-transform: uppercase;
}

.make_bet {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
}

.bet-button {
  justify-self: end;
  border: 1px solid #fff;
  padding: 12px 32px;
}

.bet_text {
  padding-right: 100px;
  line-height: 28px;
  word-spacing: 17px;
}
<section class="cover overlay">
  <div class="cover_wrapper">
    <div class="ono_tebe_nado">
      <div class="aligned-text">О<span class="letter-spacing_60">но</span></div>
      <div class="aligned-text_center">те<span class="letter-spacing_60">бе</span></div>
      <div class="aligned-text_right"><span class="letter-spacing_60">н</span>ад<span class="letter-spacing_0">о</span>
      </div>
    </div>
    <div class="make_bet">
      <div class="bet-button">Сделать ставку</div>
      <div class="bet_text">Аукцион вещей, в которые никто не верил</div>
    </div>
  </div>
</section>

1
  • 1
    .make_bet { align-items: center; }
    – Arbery
    15 сен в 17:08

2 ответа 2

0

Можно воспользоваться align-items: center; (в данном случае задаст выравнивание по вертикали):

.cover {
  height: 757px;
  color: #fff;
  background-image: url(https://i.ibb.co/s6kGSxv/cover.jpg);
  background-size: cover;
}

.cover_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 530px;
  margin: 165px 50px 62px 50px;
}

.ono_tebe_nado {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.letter-spacing_60 {
  letter-spacing: 60px;
}

.letter-spacing_0 {
  letter-spacing: 0px;
}

.aligned-text {
  display: flex;
  font-weight: 700;
  font-size: 100px;
  line-height: 115%;
  letter-spacing: 30px;
  text-transform: uppercase;
}

.aligned-text_center {
  display: flex;
  align-self: center;
  font-weight: 700;
  font-size: 100px;
  line-height: 115%;
  letter-spacing: 30px;
  text-transform: uppercase;
}

.aligned-text_right {
  display: flex;
  align-self: end;
  font-weight: 700;
  font-size: 100px;
  line-height: 115%;
  letter-spacing: 30px;
  text-transform: uppercase;
}

.make_bet {
  display: flex;
  flex-direction: row-reverse;
  /* new */
  align-items: center;
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
}

.bet-button {
  justify-self: end;
  border: 1px solid #fff;
  padding: 12px 32px;
}

.bet_text {
  padding-right: 100px;
  line-height: 28px;
  word-spacing: 17px;
}
<section class="cover overlay">
  <div class="cover_wrapper">
    <div class="ono_tebe_nado">
      <div class="aligned-text">О<span class="letter-spacing_60">но</span></div>
      <div class="aligned-text_center">те<span class="letter-spacing_60">бе</span></div>
      <div class="aligned-text_right"><span class="letter-spacing_60">н</span>ад<span class="letter-spacing_0">о</span>
      </div>
    </div>
    <div class="make_bet">
      <div class="bet-button">Сделать ставку</div>
      <div class="bet_text">Аукцион вещей, в которые никто не верил</div>
    </div>
  </div>
</section>

Или, как вариант, margin-block: auto; / margin: auto 0; (эффект будет тот же):

.cover {
  height: 757px;
  color: #fff;
  background-image: url(https://i.ibb.co/s6kGSxv/cover.jpg);
  background-size: cover;
}

.cover_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 530px;
  margin: 165px 50px 62px 50px;
}

.ono_tebe_nado {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.letter-spacing_60 {
  letter-spacing: 60px;
}

.letter-spacing_0 {
  letter-spacing: 0px;
}

.aligned-text {
  display: flex;
  font-weight: 700;
  font-size: 100px;
  line-height: 115%;
  letter-spacing: 30px;
  text-transform: uppercase;
}

.aligned-text_center {
  display: flex;
  align-self: center;
  font-weight: 700;
  font-size: 100px;
  line-height: 115%;
  letter-spacing: 30px;
  text-transform: uppercase;
}

.aligned-text_right {
  display: flex;
  align-self: end;
  font-weight: 700;
  font-size: 100px;
  line-height: 115%;
  letter-spacing: 30px;
  text-transform: uppercase;
}

.make_bet {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
}

.bet-button {
  justify-self: end;
  border: 1px solid #fff;
  padding: 12px 32px;
}

.bet_text {
  padding-right: 100px;
  line-height: 28px;
  word-spacing: 17px;
  /* new */
  /* margin-block: auto; */
  margin: auto 0;
}
<section class="cover overlay">
  <div class="cover_wrapper">
    <div class="ono_tebe_nado">
      <div class="aligned-text">О<span class="letter-spacing_60">но</span></div>
      <div class="aligned-text_center">те<span class="letter-spacing_60">бе</span></div>
      <div class="aligned-text_right"><span class="letter-spacing_60">н</span>ад<span class="letter-spacing_0">о</span>
      </div>
    </div>
    <div class="make_bet">
      <div class="bet-button">Сделать ставку</div>
      <div class="bet_text">Аукцион вещей, в которые никто не верил</div>
    </div>
  </div>
</section>

0

Желаемого Вами эффекта можно добиться используя bootstrap. Может быть не точь в точь, но всё же

.background-container {
  height: 757px;
  background-image: url(https://i.ibb.co/s6kGSxv/cover.jpg);
  background-size: cover;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ono tebe nado</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="background-container">
      <div class="row justify-content-start">
        <div class=col-4>
          <h1 class="text-white ms-5">ОНО</h1>
        </div>
      </div>
      <div class="row justify-content-center">
        <div class=col-4>
          <h1 class="text-white">ТЕБЕ</h1>
        </div>
      </div>
      <div class="row justify-content-end">
        <div class=col-4>
          <h1 class="text-white mb-5">НАДО</h1>
        </div>
      </div>
      <div class="row justify-content-around">
        <div class="col-8">
          <p class="fs-1 text-white lh-1 ms-5">Аукцион вещей, в которые никто не верил</p>
        </div>
        <div class="col-4">
          <button type="button" class="btn btn-outline-dark fs-2 text-white lh-1">Сделать ставку</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.