Центрирование блочного контента

@ArinaD17 · Регистрация: 07.09.2023

Author24 — интернет-сервис помощи студентам

Помогите, пожалуйста, разобраться как можно отцентрировать набор картинок так, чтобы при уменьшении ширины браузера, этот набор оставался по центру? Сверху и снизу два абзаца. У меня не центрируется при изменении ширины браузера.

CSS

  .Top {
   position: relative;
   margin-bottom: 16px; }
 
 .Base {
  position: relative;
  margin-top: 386px;
  width: 100%;
  height: auto; }
 
 div.Picts {
 position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    width: 450px;
    height: 370px; }
 
 .Base-1 {
 position: absolute; }
 
 
   .Pict:hover {
   position: absolute;
    z-index:3;
    cursor: pointer; }

HTML5

<div class='Top'>text</div>
<div class='Base-1'>
<div class='Picts'>
<div class='Pict'></div>
<div class='Pict'></div>
<div class='Pict'></div>
<div class='Pict'></div>
</div>
<div class='Base'>text</div>
</div>

Заранее благодарю!

@rr33rr · 23.09.2023, 10:59

Сообщение от ArinaD17

как можно отцентрировать набор картинок так, чтобы при уменьшении ширины браузера, этот набор оставался по центру? Сверху и снизу два абзаца.

1) Здесь position: absolute; и position: relative; не нужны. Избавляйтесь от них: их область применения для особых случаев позиционирования.
2) Для центровки блока по горизонтали используется стилевое свойство margin: 0 auto;

Короче сделать можно, как-то так:

а) Вариант с инлайновыми блоками

PHP/HTML

<!doctype html>
<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}
.Top {
  margin: 16px;
}
.Base {
  margin: 16px;
  width: 100%;
  height: auto;
}
div.Picts {
  /* Обнуляем размер шрифта, чтобы он не влиял на отступы между инлайновыми блоками-картинками. Если внутри блоков-картинок планируется текст, там нужно вернуть размер шрифта отличный от нуля */
  font-size: 0;
  /* центровка блока Picts по горизонтали */
  margin: 0 auto;
  /* центровка блоков-картинок внутри блока Picts по горизонтали */
  text-align: center;
  width: 450px;
  /* Не ясно зачем ограничение по высоте. Какое поведение планируется, если картинки перестанут помещаться в отведенную область по вертикали? */
  height: 370px;
  /* Заливка фона для наглядности */
  background: #ccc;
}
.Base-1 {
}
.Pict {
  display: inline-block;
  margin: 10px;
  width: 130px;
  height: 130px;
  /* Заливка фона для наглядности */
  background: #cfc;
}
.Pict:hover {
  cursor: pointer;
}
</style>
</head>
<body>
<div class='Top'>text</div>
<div class='Base-1'>
  <div class='Picts'>
    <div class='Pict'></div>
    <div class='Pict'></div>
    <div class='Pict'></div>
    <div class='Pict'></div>
    <div class='Pict'></div>
  </div>
  <div class='Base'>text</div>
</div>
</body>
</html>

См в песочнице

б) Вариант на flex

PHP/HTML

<!doctype html>
<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}
.Top {
  margin: 16px;
}
.Base {
  margin: 16px;
}
div.Picts {
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  flex-wrap: wrap;
  width: 450px;
  height: 370px;
  background: #ccc;
}
.Base-1 {
}
.Pict {
  width: 130px;
  height: 130px;
  margin: 10px;
  background: #cfc;
}
.Pict:hover {
  cursor: pointer;
}
</style>
</head>
<body>
<div class='Top'>text</div>
<div class='Base-1'>
  <div class='Picts'>
    <div class='Pict'></div>
    <div class='Pict'></div>
    <div class='Pict'></div>
    <div class='Pict'></div>
    <div class='Pict'></div>
  </div>
  <div class='Base'>text</div>
</div>
</body>
</html>

См в песочнице

@ArinaD17 · 23.09.2023, 11:03 **[ТС]**

Извините, не отметила важный момент: картинки должны быть размещены с абсолютным позиционированием (position: absolute)

@rr33rr · 23.09.2023, 11:26

Сообщение от ArinaD17

Извините, не отметила важный момент: картинки должны быть размещены с абсолютным позиционированием (position: absolute)

Зачем?
Вы собираетесь положение каждой картинки выставлять в ручную?
ОК. Если очень хочется, то можно и так:

PHP/HTML

<!doctype html>
<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}
.Top {
  margin: 16px;
}
.Base {
  margin: 16px;
}
div.Picts {
  margin: 0 auto;
  position: relative;
  width: 450px;
  height: 370px;
  /* Заливка фона для наглядности */
  background: #ccc;
}
.Base-1 {
}
.Pict {
  position: absolute;
  width: 200px;
  height: 150px;
  /* Заливка фона для наглядности */
  background: #cfc;
}
.Pict:hover {
  cursor: pointer;
}
</style>
</head>
<body>
<div class='Top'>text</div>
<div class='Base-1'>
  <div class='Picts'>
    <div class='Pict' style="top: 20px; left: 20px;"></div>
    <div class='Pict' style="top: 200px; left: 20px;"></div>
    <div class='Pict' style="top: 20px; left: 230px;"></div>
    <div class='Pict' style="top: 200px; left: 230px;"></div>
  </div>
</div>
<div class='Base'>text</div>
</body>
</html>

См в песочнице

@ArinaD17 · 23.09.2023, 11:53 **[ТС]**

Супер, сработало! Спасибо!
(да, положение каждой картинки выставила вручную, и с абсолютным позиционированием, так требовалось по тех.заданию).

@ArinaD17 2 / 2 / 0 Регистрация: 07.09.2023 Сообщений: 59
	23.09.2023, 11:03 [ТС]	3
	Извините, не отметила важный момент: картинки должны быть размещены с абсолютным позиционированием (position: absolute) 0

@ArinaD17 2 / 2 / 0 Регистрация: 07.09.2023 Сообщений: 59
	23.09.2023, 11:53 [ТС]	5
	Супер, сработало! Спасибо! (да, положение каждой картинки выставила вручную, и с абсолютным позиционированием, так требовалось по тех.заданию). 0

Центрирование блочного контента

Решение