0

Суть проблемы: нужно выровнять родительский блок по центру окна браузера. Я это сделал через position: absolute и margin: auto/ Далее необходимо разместить в этом родительском блоке дочерние блоки. И тут проблема - из-за position: absolute, а не RELATIVE, дочерний div опускается под родительский. Подскажите, как центрировать родительский блок относительно окна браузера и в нем разместить дочерние блоки с конкретными координатами?

* {
  box-sizing: border-box;
}

.box {
  position: relative;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 1000px;
  height: 503px;
  border: 2px solid black;
  background-color: #D0AAF0;
}

.head {
  position: absolute;
  display: inline-block;
  background-color: red;
  width: 178px;
  height: 22px;
  top: 94px;
  right: 300px;
  left: 100px;
  bottom: 387px; 
}
#img {
  display: inline-block;
  padding-left: 48px;
  padding-top: 64px;
  padding-bottom: 64px;
  padding-right: 586px;
}
<div class="box">
  <div id="img"><img src="img/img_1.png"></div>
  <div class="head"><span>Наушники</span></div>	
</div>

3
  • Так, по-порядку, пожалуйста. Родительский блок это .box? Достаточно margin: auto. Что нужно сделать с дочерними? Зачем им position: absolute? Абсолютное позиционирование это уже отчаянная мера на мой взгляд) Объясните, как они должны быть расположены. А лучше нарисуйте 1 ноя 2018 в 18:51
  • Спасибо, уже сам допер, сделал) Проблема была в том, что дочерние блоки из родительского (да, .box) летали по странице где угодно, только не в род. блоке. Решением оказалось - всем блокам (родительскому и дочернему) задать position: absolute? но я не уверен в том, насколько это верно, и верно ли вообще, а так все получилось)
    – Andelight
    1 ноя 2018 в 19:03
  • absolute точно не решает проблему. Блоки ни с того ни с сего по странице не летают. Если приложите вариант до применения абсолютов и прочего, с исходной проблемой, возможно мы сможем помочь 1 ноя 2018 в 20:46

1 ответ 1

0

Как и сказано выше в комментарии, для блока с классом .box достаточно сделать margin: auto (Если у блока постоянная ширина и высота, то он автоматически рассчитает отступы для центрирования). Абсолютная позиция здесь вообще не нужна, дальше уже можно делать с box все что вам угодно.

Ваш ответ

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

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