Css блоки по центру: Выравниваем блок по центру страницы / Хабр

CSS для Markdown, центрирования блоков и стилизации изображений — Советы

chrillek 9 июня 2022 г., 11:37

#1

Это шестая часть постов об использовании CSS в DT/DTTG и вместе с ними. Хотя я написал его как единое целое, я разбил его на более мелкие части, чтобы посты (едва ли) можно было обрабатывать. Пожалуйста, дайте мне знать (желательно в ПМ), если вы обнаружите какие-либо ошибки или недостающие детали. Первые поправлю, а со вторыми постараюсь помочь.
Предыдущий пост | Следующий пост

Как центрировать элементы

Иногда может потребоваться центрировать определенные элементы, например таблицы. Во-первых, во многих случаях это имеет смысл только в том случае, если элемент не такой широкий, как окружающие. Таким образом, вы должны установить значение width для вашего элемента, которое меньше ширины

body . После этого просто установите для margin-left и margin-right значение auto . Это гарантирует, что оба поля имеют одинаковую ширину и что пустое пространство равномерно распределено слева и справа от вашего элемента, эффективно центрируя его. Например, для таблицы вы должны написать

 таблица {
  ширина: 45ч;
  поле слева: авто;
  поле справа: авто;
}
 

Изменение размера и стилизация изображений

Без стилизации изображение будет отображаться в максимально возможном размере. Если он меньше, чем объемлющий элемент (т.е. корпус ), он будет сделан такой же ширины, как элемент корпуса . Если он меньше, он будет отображаться в исходном размере.

Размер и положение изображения по умолчанию 1042×754 87,9 КБ

Высота изображения будет установлена ​​в соответствии с исходным соотношением сторон и во избежание искажений. Есть способы указать ширину и высоту изображения в самом документе Markdown, но я не советую этого делать: намного проще стилизовать (и размер) все изображения одинаково с помощью CSS.

Итак,

 изображение {
  ширина: 50%;
}
 

устанавливает ширину всех изображений равной половине их родительского элемента.

Изображение с шириной, равной 50% окружающего элемента986×560 59,6 КБ

Если вы попробуете это, вы заметите, что изображение в середине абзаца выглядит немного странно, так как оно прерывает поток текста в забавный способ.

Причина этого в том, что элемент img отображается «встроенным», как и текст. Поскольку он занимает намного больше места по вертикали, чем строка текста, поток текста прерывается.

Один из способов исправить это — изменить визуализацию изображений:

 img {
  дисплей: блок;
}
 

Изображение отображается как блок вместо встроенного 1016×576 62,5 КБ

Теперь изображения ведут себя как абзацы, т. е. принудительно разрывают строки до и после них.

Другой, более приятный для визуального восприятия способ стилизации изображений — обтекание их текстом, как описано ниже. Или вы можете, как показано ранее, центрировать изображение в его родительском элементе.

Возможно, вы захотите добавить небольшую тень у правого и нижнего полей изображения, чтобы оно немного выделялось:

 изображение {
  box-shadow: 0.3em 0.3em 0.3em #ddd;
}
 

делает именно это. Однако подробное объяснение значений заняло бы здесь слишком много места. Возможно, вы захотите прочитать о box-shadow на MDN и поиграть с параметрами.

Обтекание текста вокруг изображений

Во многих случаях текст выглядит лучше, если текст продолжается рядом с изображением, а не имеет широкую пустую область вокруг изображения. Вы можете добиться этого, «плавая» изображение:

 img {
  плыть налево;
}
 

Левое плавающее изображение без полей 1034×500 59,5 КБ

заставляет изображение оставаться на левом поле документа, а текст продолжается на его правой стороне. Вы должны установить верхнее, правое и нижнее поле для элемента img , чтобы текст не теснил его.

Вместо того, чтобы текст обтекал изображение с правой стороны, вы можете установить float на right , чтобы изображение отображалось на правом поле документа, а текст — слева от него.

Левое плавающее изображение с полями 1026×594 87,4 КБ

CSS: Центрировать разделы переменной ширины по горизонтали

Опубликовано 24 февраля 2014 г. автором hb

При центрировании элементов div, если ваш элемент div имеет фиксированную ширину, вы можете либо абсолютно расположить его, либо установить отрицательные поля, как показано в этом посте. Другой способ центрировать такой блок div с фиксированной шириной по горизонтали — установить для его левого и правого поля значение auto. Затем браузер должен установить для обоих полей одинаковое значение.

К сожалению, эти два известных метода можно использовать, если ваш div не имеет фиксированной ширины. В этом случае вам понадобится другое решение.

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

 
<тело>
<дел>
<дел>
Я хочу быть в центре