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

Вертикальное выравнивание внутри блочного элемента

Постановка задачи: необходимо задать вертикальное выравнивание для inline или inline-block элементов внутри блочного элемента.

Подходы к решению задачи. Существуют различные способы, рассмотрим основные из них:

1. Представить блочный элемент как ячейку таблицы (display: table-cell).
2. IE6-7: метод expression.
3. Приравнивание межстрочного интервала (свойство line-height) и высоты блока (для однострочных элементов).
4. Позиционирование при помощи внешнего блока (position:absolute).

Ну а подведя итоги, рассмотрим еще один метод:

5. Выравнивание с помощью свойства vertical-align.

display: table-cell

Для вертикального выравнивания применяется свойство display: table-cell родительскому блоку, которое заставляет элемент эмулировать ячейку таблицы. Ему же задается высота и vertical-align: middle:

Плюсы:

• Простота;
• Выравнивает как одну, так и несколько строк.

Минусы:

• Не работает в IE7 и ниже;
• Без дополнительных конструкций сложно манипулировать горизонтальным положением внешнего блока;
• Не всем нравится сам факт использования display: table-cell.

IE6-7: метод expression

Т.к. предыдущий способ не работает в IE6-7, то надо исправить эту неприятность.

Expression — короткие куски JS кода, которые помещаются в файл стилей, выполняются один раз и работают только в IE. Expression невалидны. Добавляем к предыдущему примеру в файлы стилей для IE6 и 7 такой кусок кода:

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

line-height

Для выравнивания одной строки текста можно использовать одинаковые значения высоты и межстрочного интервала для блока-родителя. Подходит для кнопок, пунктов меню и т.д.

Плюсы:

• Простота;
• Кроссбраузерность.

Минусы:

• Подходит только для однострочных элементов;
• Позволяет выравнивать только по центру.

position и отрицательный margin вверх

Элемент можно выровнять по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin-top, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:

Плюсы:

• Кроссбраузерность;
• Выравнивать элементы можно как по центру, так и в любом другом положении.

Минусы:

• Трудоемко при большом количестве элементов;
• Сложно управлять;
• Необходимо знать и фиксировать высоту элемента;
• В некоторых браузерах абсолютное позиционирование может вызвать снижение производительности.

Итог по популярным методам

Как видно, данные методы не являются универсальными – каждый из них имеет пусть и небольшие, но недостатки. Наиболее универсальным оказывается метод display: table-cell, но он мне никогда не нравился, к тому же мы очень долго не отказывались от поддержки IE6-7. Поэтому появилась необходимость поработать над чем-то более универсальным. Рассмотрим Выравнивание при помощи vertical-align.

Выравнивание при помощи vertical-align

Как известно, свойство vertical-align не работает для блочных элементов, поэтому применять это свойства для них бесполезно. Однако, данное свойство прекрасно работает для inline и inline-block элементов. Если мы попробуем применить данное свойство для элементов внутри блочного элемента, то мы получим следующую картину:

Как видно, элементы выравниваются относительно строки, а не всего блока, что нам не подходит. Попробуем тогда внутрь блока добавить элемент (т.к. для inline элемента высоту задать нельзя, то элемент должен быть inline-block) с высотой равной высоте внешнего блока. Добавляем <span></span> (на картинке ниже показан серой линией) и получаем:

Зададим для всех элементов <span></span> vertical-align:middle.

Что ж, одну строку мы таким образом отцентрировали. А что, если надо несколько строк? И тут проблем нет. Надо лишь для текстовых элементов задать display:inline-block:

Если нам не важна совместимость со старыми версиями IE, то элемент <span></span> мы можем удалить, а его стили заменить на:

Стоит отметить несколько моментов:

• К элементам, которые выравниваются, нельзя применять свойство float.
• Между соседними inline-block элементами всегда есть расстояние, поэтому если их надо прижать друг к другу, то для внешнего блока надо задать font-size:0px; а у самих элементов восстановить, задав нужное значение.
• Для внутренних элементов таким образом можно задавать как одинаковые значения (top, bottom или middle), так и разные.

Плюсы:

• Простота;
• Кроссбраузерность;
• Выравнивать элементы можно как по центру, так и в любом другом положении;
• Подходит как для одной строки, так и для нескольких. Также, т.к. элемент имеет display:inline-block, он может содержать текст, графику (фон, картинка) и любой другой элемент.

Минусы:

• Приходится добавлять дополнительный элемент;
• При использовании псевдоэлемента :after, теряется поддержка старыми версиями IE.

← Назад в раздел

css — Выравнивание изображения по центру с помощью Tailwind и ReactJS

Использование Tailwind с ReactJS Я пытаюсь выровнять изображение по центру, но не могу, это мой код:

 
 
      

        <изображение
            источник = { Логотип }
            alt= "Логотип"
            className="object-none object-center"
        />
      
      

...
      
    
 

Вот скриншот результата:

• css
• reactjs
• tailwind-css

1

Сделайте div parent flex вместо block , добавьте justify-center

вот так:

 

  <дел>
     photos/200" alt="Логотип" />
  
  <форма>...