• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Выравнивание div внутри другого div в CSS (Вертикальное выравнивание внутреннего контейнера Div)
Выравнивание div внутри другого div в CSS
Kosten
Дата: Понедельник, 2019-04-08, 22:43 | Сообщение 1
Администраторы
Сообщений:22338
Награды: 56


Создаем вертикальное выравнивание, которое будет проходить при помощи CSS, где делаем центрирование div внутри другого div, где задействуем стилистику. Есть моменты, когда у вас есть контейнер Div внутри контейнера Div, и вам необходимо централизовать внутренний контейнер Div вдоль горизонтальной оси. Возможно, вы пытались настроить align = ”center”, но это устарело.

Эффект может быть просто достигнут путем применения CSS к внутреннему контейнеру div, который должен быть горизонтально централизован. Это обеспечит аккуратное размещение содержимого во внутреннем контейнере в обозначенной области, определяемой внешним контейнером.



Вертикальное + горизонтальное выравнивание

HTML

Код
<div id="kasanued-samipokam">
  <div id="dokasen-ledsamun"></div>
</div>

CSS

Код
#kasanued-samipokam {
    background: #147d1d;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}            
#dokasen-ledsamun {
    background: #e21149;
    width: 95px;
    height: 95px;
}


Демонстрация

Вариант CSS №1

Следующий код CSS горизонтально центрирует внутренний контейнер div.

Код
#inner {
margin: 0 auto;
}


Помните, что ширина внутреннего контейнера div, если ширина определяется, должна быть меньше, чем внешний контейнер div. Атрибут margin выполняет фактическое горизонтальное центрирование. Для Internet Explorer 8 и более поздних версий вы можете попробовать этот код CSS вместо этого:

Код
#inner {
display: table;
margin: 0 auto;
}


Он центрируется горизонтально, не требуя определения ширины. Помните, что для правильной работы CSS в IE8 + на странице HTML потребуется тег! DOCTYPE.

Вариант CSS №2

Хотя вариант 1 является предпочтительным, существует другой метод. Тем не менее, это может не работать со всеми браузерами. Предполагая, что контейнер div имеет ширину 300 пикселей, можно использовать следующий код:

Код
.centered {
position: absolute;
left: 50%;
margin-left: -150px;
}


Это не подходит для очень широких контейнеров.

Вариант CSS №3

Если вы хотите центрировать внутренний контейнер div по горизонтали и вертикали, тогда может пригодиться следующий код:

Код
#outer {
position: relative;
}
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}

Важно учитывать плюсы и минусы каждого варианта и помнить, что все больше интернет-пользователей теперь получают доступ к Интернету через мобильные устройства, такие как планшеты и смартфоны. Вы хотите убедиться, что код CSS будет обслуживать различные размеры экрана.
Прикрепления: 2324552.png(1.7 Kb) · zader.zip(1.5 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2019-04-08, 22:54 | Сообщение 2
Администраторы
Сообщений:22338
Награды: 56


Flexbox вертикально горизонтально выравнивая фиксированную ширину и переменную высоту в контейнере.



HTML

Код
<div class="gtedsanu-pokudam">
  <div class="variableigin-acontainedev">
    <h2 class="gtedsanu-pokudam__title">Симметричное совершенство</h2>
    <span class="gtedsanu-pokudam__sub">Прекрасное зрелище, достигнутое с помощью flexbox.</span>
  </div>
</div>


CSS

Код
.gtedsanu-pokudam {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 180px;
  background-color: #cecece;
}

.variableigin-acontainedev {
  text-align: center;
}

.gtedsanu-pokudam__title,
.gtedsanu-pokudam__sub {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

@media all and ( min-width: 480px ) {

  .gtedsanu-pokudam {
    height: 240px;
  }

}

@media all and ( min-width: 768px ) {

  .gtedsanu-pokudam {
    height: 360px;
  }

}

@media all and ( min-width: 960px ) {

  .gtedsanu-pokudam {
    height: 480px;
  }

}


Демонстрация
Прикрепления: 0584322.png(9.6 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2019-04-08, 23:00 | Сообщение 3
Администраторы
Сообщений:22338
Награды: 56


Центрирования-вертикально-горизонтально-Align



HTML

Код
  <div class="wrapper">
    <div class="center">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="wrapper flex">
    <p>Flexbox</p>
    <div class="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>


CSS

Код
  .wrapper {
      max-width: 700px;
      height: 200px;
      margin: 10px auto;
      padding: 10px;
      background-color: #fff;
      position: relative;
    }

    .center {
      width: 400px;
      background: #333;
      border-radius: 5px;
      color: white;
      padding: 20px;
    }

    .wrapper.flex {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .wrapper .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .wrapper.flex .center {
      background: #333;
      border-radius: 5px;
      color: white;
      padding: 20px;
    }


Демонстрация
Прикрепления: 6171874.png(7.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Выравнивание div внутри другого div в CSS (Вертикальное выравнивание внутреннего контейнера Div)
  • Страница 1 из 1
  • 1
Поиск: