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

Ваш ответ

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

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