Блог

Главная - Вопросы по программированию - Как я могу сделать так, чтобы div внутри обертки div оставался центрированным?

Как я могу сделать так, чтобы div внутри обертки div оставался центрированным?

#html #css

#HTML #css — код

Вопрос:

Я хочу создать 2-ю оболочку div, которая будет содержать три квадрата, равноудаленных друг от друга, примерно 200 пикселей x 200 пикселей. Проблема в том, что они не выровнены по середине div, и всякий раз, когда изменяется размер окна, квадраты сохраняют статическое положение на веб-сайте. Я бы хотел, чтобы они были центрированы независимо от размера окна.

Пожалуйста, посмотрите на мой код:

 /*Comment example - created 10/12/16*/

* {
  font-family: 'Libre Franklin', sans-serif;
  background-color: rgb(255, 255, 255);
}
.wrapper {
  /*black*/
  width: 960px;
  min-height: 700px;
  margin: 0 auto;
}
.main_content {
  width: 730px;
  min-height: inherit;
  text-align: center;
  float: left;
}
.wrapperTwo {
  width: 100%;
  height: 300px;
  background-color: rgba(99, 99, 99, 0.7);
  align: center;
}
#squareOne {
  width: 200px;
  height: 200px;
  background-color: rgba(99, 99, 99, 0.7);
  border: 1px solid rgb(223, 223, 223);
  position: relative;
  top: 50px;
  left: 150px;
}
#squareTwo {
  width: 200px;
  height: 200px;
  background-color: rgba(99, 99, 99, 0.7);
  border: 1px solid rgb(223, 223, 223);
  position: relative;
  top: -155px;
  left: 550px;
}
#squareThree {
  width: 200px;
  height: 200px;
  background-color: rgba(99, 99, 99, 0.7);
  border: 1px solid rgb(223, 223, 223);
  position: relative;
  top: -355px;
  left: 960px;
}
.wrapperThree {
  width: 100%;
  height: 500px;
}
h2 {
  position: relative;
  left: 5px;
}
h5 {
  position: relative;
  left: 5px;
}
p {
  position: relative;
  left: 5px;
} 
 <div class=banner></div>
<div class="wrapper">
  <div class="main_content">
    <h2></h2>
    <!-- END OF H2 -->
    <h5> Inc. has been a  standard of web-based and cloud-based server systems since 2007.</h5> 
    <!-- END OF H5 -->
    <p>
      Our clients have trusted our team for almost a decade and throughout the years we have proven our worth over and over again.
    </p>
    <!-- END OF P -->
  </div>
  <!-- END OF MAIN_CONTENT -->

</div>
<!-- END OF wrapper -->

<div class="wrapperTwo">
  <div id="squareOne"></div>
  <div id="squareTwo"></div>
  <div id="squareThree"></div>
</div>
<!-- END OF wrapperTwo-->

<div class="wrapperThree"></div>

Комментарии:

1. Добро пожаловать в Stack Overflow! Позиционирование — это очень плохой метод размещения веб-страниц. Он чрезвычайно негибкий, и есть гораздо лучшие и более отзывчивые варианты. Проверьте LearnLayout.com

Ответ №1:

Попробуйте использовать лучший подход для выравнивания элементов по центру. 1 популярный пример position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); .

Таким образом, элемент начнет позиционировать себя с середины своего контейнера и будет смещаться на 50% от своего собственного размера.

Метки: ,