0

Есть следующий код в HTML:

<section id="hello_section">
  <div class="hello_section_wrapper">
   <div class="hello_section_text_wrapper">
    <h1>Imagine your home smart enough <strong class="hello_section_green_text">to take care</strong> of itself.</h1>
    <p>Turn your home into a smarthome today with a simple & affordable upgrade. Discover the upgrade that automates home maintenance.</p>
    <div class="hello_section_btns">
      <a class="hello_section_green_btn" href="#">Get Started</a>
      <a class="hello_section_clear_btn" href="#">Learn More</a>
    </div>
   </div>
   <div class="hello_section_img_wrapper">
     <img class="hello_section_img1" src="img/hello_section_img1.png" alt="Interior image">
     <img class="hello_section_img2" src="img/hello_section_img2.png" alt="Interior image">
   </div>
 </div>
</section>

И такие стили:

#hello_section {
  width: 100%;
  height: 100vh;
  background: url('img/hello_section_bg.svg') -5px 0/1200px no-repeat;
}
.hello_section_wrapper {
  margin: auto;
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hello_section_text_wrapper {
  width: 600px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.hello_section_btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.hello_section_img_wrapper {
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.hello_section_img2 {
  transform: translate(200px, -200px);
}

Вопрос в том, как сделать что б блоки hello_section_text_wrapper и hello_section_img_wrapper были выровнены по вертикали относительно hello_section_wrapper. Понимаю, что проблема в том, что у меня высота указывается в процентах от родительского блока, где высота тоже в процентах, но не знаю как сделать по другому. Надеюсь на помощь. Спасибо

1 ответ 1

1

#hello_section {
  width: 100%;
  height: 100vh;
  background: url('img/hello_section_bg.svg') -5px 0/1200px no-repeat;
}
.hello_section_wrapper {
  margin: auto;
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hello_section_text_wrapper {
  width: 600px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.hello_section_btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
<section id="hello_section">
  <div class="hello_section_wrapper">
   <div class="hello_section_text_wrapper">
    <h1>Imagine your home smart enough <strong class="hello_section_green_text">to take care</strong> of itself.</h1>
    <p>Turn your home into a smarthome today with a simple & affordable upgrade. Discover the upgrade that automates home maintenance.</p>
    <div class="hello_section_btns">
      <a class="hello_section_green_btn" href="#">Get Started</a>
      <a class="hello_section_clear_btn" href="#">Learn More</a>
    </div>
   </div>
   <div class="hello_section_img_wrapper">
     <img class="hello_section_img1" src="img/hello_section_img1.png" alt="Interior image">
     <img class="hello_section_img2" src="img/hello_section_img2.png" alt="Interior image">
   </div>
 </div>
</section>

1
  • спасибо, помогло. Но я и сам нашёл ошибку, у меня в этой секции ещё был хедер и его мобильная версия, которую хоть и не было видно, но она занимала место
    – 429
    2 мар 2021 в 10:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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