Как центрировать изображение в css

Нужно центрировать изображение на веб-странице с помощью CSS

Я хотел бы центрировать изображение на странице как по вертикали, так и по горизонтали, даже если размер браузера изменен.

В настоящее время я использую этот CSS:

Он центрируется в FF, но не IE (центр изображения расположен в верхнем левом углу). Есть идеи?

Попробуйте использовать это:

Я решил это так:

Это сложный способ, но он работает:

универсальный способ KISS ("будь проще и глупее"):

Существует очень простой кросс-браузерный метод автоматического изменения размера. Съемка изображения шириной 200 пикселей. Возьмите половину ширины и сделайте следующее:

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

ясно: оба; наценка: авто;

так как вы упомянули:

И если он правильно выровнен по центру, то высота вашего изображения будет 50×2 = 100px; & ширина 150×2 = 300 пикселей;

Если предоставленные ответы не работают и/или не согласуются в каждом браузере, вы можете попробовать:

Должен получить, хотя.

IE имеет проблемы с position: fixed (наряду с миллионами других вещей), поэтому я бы советовал против этого, если важна совместимость.

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

text-align: center должен работать, если он применяется к контейнеру изображения, но не к самому изображению. Но, конечно, это касается только горизонтального, а не вертикального. vertical-align: middle не работает для меня, даже с достаточно большим контейнером.

Авто поля не работают в IE, по крайней мере, когда я проверяю это.

Я это сделал! Этот метод отлично работает и работает во всех основных браузерах.

Я просто использовал левую половину ширины изображения, а затем переместил его, используя поле. Работает угощение 🙂

Как центрировать изображение в css?

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

Как выровнять текст по вертикали в CSS?

  1. padding или margin.
  2. line-height = height.
  3. Вертикальное выравнивание иконок и смайликов
  4. display: table-cell; и vertical-align: middle;
  5. vertical-align и :before.
  6. position: absolute; (или position: fixed;) и картинки

Как выровнять блоки в css?

Самый современный метод! Для этого контейнеру нужно записать в стили свойство display: flex, а его вложенному блоку – margin: auto. Элемент будет выровнен по центру, причем и по горизонтали, и по вертикали. Если вам нужно выравнивание только по вертикали, то можно записать, например, так: margin: auto 0.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *