Css img по центру: Как выровнять картинку по центру с помощью CSS

система 14 сентября 2009 г., 14:30 5

Спасибо. Мой инструктор сказал, что вместо этого мы можем использовать CSS в начале файла или в другом файле, но мы не узнаем об этом до главы 3, поэтому прямо сейчас я использовал теги стиля.

Я попробую их и посмотрю, что получится. Спасибо!

Дэвид Чайлдресс 15 сентября 2009 г., 9:48 6

Привет, RusticProgrammer,

В третьем и четвертом издании (стр. 143) своего учебника Венди Уиллард предлагает:

1. указать браузеру отображать то, что ОБЫЧНО было бы встроенным изображением, как блочный элемент. в CSS блочные элементы автоматически заполняют все доступное пространство. Таким образом, если изображение становится блочным элементом, его поля будут увеличиваться, пока не достигнут краев окна браузера 9.0054

display: block

2. next… скажите браузеру сделать ОБА левое и правое поля одинаковыми… конструктивно это центрирует изображение

margin-left: auto
margin-right: auto

Итак… код стиля CSS, РАСПОЛОЖЕННЫЙ в элементе и использующий «centered» в качестве CLASS, будет выглядеть так:

img.centered {отображение: блок; поле слева: авто; margin-right: auto;}

HTML-код внутри элемента будет выглядеть так:

система Закрыто 8 октября 2014 г. , 00:54 7

Как центрировать изображение по вертикали и горизонтали: 6 фрагментов

Когда я начал веб-разработку, мне было трудно выровнять изображение точно по центру в div. Конечно text-align:center; немного работал для меня, но в то время я не был так счастлив.

С тех пор, как был представлен Flexbox, почти все усилия отошли от старых методов. Я бы предложил использовать только один метод для решения этой проблемы — Flexbox. Используя flexbox, мы можем легко центрировать изображения по вертикали и горизонтали внутри родительского элемента div.

Но есть много способов сделать то же самое с помощью CSS. В этой статье я перечислил некоторые из наиболее полезных методов.

1. Flexbox

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

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

Как Flexbox центрирует изображение

Flexbox использует очень мощный алгоритм, который понимает свое окружение. Так что нам просто нужно установить flexbox в качестве родителя и применить некоторые свойства, чтобы заставить его работать.

• display: flex — говорит браузеру использовать одномерное управление макетом для элемента.
• align-items: center — выравнивает все дочерние элементы по центру элемента по вертикали. Значение по умолчанию — «растянуть», что делает ширину изображения равной 100%.
• justify-content: center — Когда у нас есть более одного элемента, justify скажет всем элементам оставаться в центре по горизонтали.
• height: 100%: Устанавливает родительскую высоту на 100% (это может быть любая высота)

Pros

• Центрирует все дочерние элементы

2.

Одним из старейших и наиболее совместимых методов является использование таблиц или методов display:table и display:table-cell. Таблицы имели поддержку вертикального центрирования с самого начала . Мы можем использовать свойство vertical-align для правильного выравнивания данных. Этот метод является хаком, и не поддерживает совместное центрирование текста и изображения .
По умолчанию центрирование текста выполняется по базовой линии, что иногда может выглядеть некрасиво.

Как таблица центрируется Изображение

Table hack использовал два элемента div для воссоздания таблицы и разметки ячеек таблицы. Итак, в родительском div мы используем таблицу отображения для включения табличного режима.

• display: table — Устанавливает div для использования свойств таблицы. Это поведение является обязательным в данной методике.
• height:100% — Устанавливает высоту стола.
• ширина: 100% — По умолчанию таблица использует автоматическую ширину, поэтому нам нужно сделать ее полной ширины, чтобы изображение было битовым для выравнивания.

В таблице используется дополнительный элемент div, который ведет себя как ячейка таблицы. Это необходимо сделать, потому что вертикальное выравнивание выполняется только для элементов table-cell.

• display: table-cell — Включает режим ячейки
• text-align: center — Горизонтальное центрирование элемента Chid
• vertical-align: middle — вертикальное центрирование для Chid Element

Комбинация text-align и vertical-align выровняет изображение по центру.

Минусы

• Текстовые элементы не работают с изображениями

3. Позиционирование и преобразование

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

Как расположить и преобразовать изображение по центру

Здесь нет фокуса. Но он отлично работает при использовании с position:relative, он работает с абсолютной позицией, но может столкнуться с проблемой переполнения, если изображение больше, чем родитель.

• положение: относительное — Это необходимо для перемещения объектов в пространстве DOM с использованием опций слева, сверху, справа, снизу. Эта опция работает и с абсолютным положением.
• слева: 50% — Перемещает изображение в центр страницы по горизонтали. Но центр изображения находится в самой левой точке, а не в центре.
• top: 50% — Перемещает изображение в центр страницы по вертикали. Но центр изображения в этот момент находится наверху. Он должен быть на половине ширины изображения.
• transform: translate(-50%, -50%) — Это перемещает объект из исходного положения на отрицательное половинное расстояние как по горизонтальной, так и по вертикальной оси.

4. Позиция и поля

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

Как положение и поля центрируют изображение

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

• положение: относительное — Это необходимо для перемещения объектов в пространстве DOM с использованием опций слева, сверху, справа, снизу. Эта опция работает и с абсолютным положением.
• слева: 50% — Перемещает изображение в центр страницы по горизонтали. Но центр изображения находится в самой левой точке, а не в центре.
• top: 50% — Перемещает изображение в центр страницы по вертикали. Но центр изображения в этот момент находится наверху. Он должен быть на половине ширины изображения.
• margin:-50px 0 0 -50px — перемещает объект из его исходного положения на отрицательную половину расстояния как по горизонтальной, так и по вертикальной оси.

5. Object-fit (Hack)

Мы можем использовать свойство простого объекта изображения, чтобы имитировать выровненный по центру вид изображения внутри div. Это будет считаться хаком, потому что изображение будет занимать всю область родителя, поэтому рядом с ним не может быть текстового элемента.

Как подгонка объекта и положение объекта центрируют изображение

Эта уловка растягивает элемент изображения до размера его родителя. Это дает растянутую версию изображения. Изображение правильно помещается в центр с помощью свойств объекта.

• позиция: абсолютная — Это позволяет изменять размер и перемещать изображение, возможное в родительском div
• слева: 0% — выравнивает левый край по левому краю родителя
• top: 0% — выравнивает верхний край по верхнему краю родителя
• ширина:100% — делает ширину 100%
• высота:100% — делает высоту 100%
• object-fit: none — это сохранит исходный размер изображения, изображение с и высота не будут иметь значения, когда мы используем свойство object-fit.
• object-position: center — Перемещает объект изображения в центральную часть изображения.

6. Фоновое изображение (взломать, но стоит упомянуть)

Это не фактическое решение проблемы, но этот метод широко используется в промышленности, поскольку он не блокирует. Изображение является частью HTML и DOM, поэтому, когда начинается загрузка страницы, начинается загрузка изображения.

Но если мы используем изображение внутри CSS, это имеет значение с точки зрения производительности. Есть три метода добавления CSS в HTML. С помощью простых правил CSS мы можем сделать так, чтобы он отображался в центре;

Как Background-Position центрирует изображение

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

• ширина: 100% — Растягивает элемент до 100% ширины родителя.
• height: 100%   — растягивает элемент до 100% высоты родственного элемента.

  No related posts.