Img по центру блока: html — Выравнивание картинки по центру div

Leave a Comment / Разное / By /

Img по центру блока — Dudom

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+9.0+1.0+1.0+1.0+1.0+

Задача

Выровнять фотографию с подписью по центру горизонтали веб-страницы.

Решение

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

Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору P следует добавить стилевое свойство text-align со значением center . При этом тег должен располагаться внутри абзаца (тег

). Чтобы не получилось так, что все абзацы на странице начали выравниваться по центру, введем свой класс fig , и все действия будем производить с ним. В примере 1 показано, как это сделать.

Пример 1. Использование text-align

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера продемонстрирован на рис. 1.

Рис. 1. Изображение, выровненное по центру веб-страницы

Также к фотографии можно добавить подрисуночную подпись. Текст должен располагаться сразу же после изображения и аналогично ему выравниваться по центру. Здесь всё просто, опять воспользуемся нашим классом, но уже применим его к тегу . Чтобы текст подписи отличался по своему виду от обычных абзацев, сделаем его курсивным и выделим другим цветом (пример 2).

Пример 2. Подрисуночная подпись

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Подпись под рисунком

Для блока с фотографией используется тег , а для подписи к нему тег . Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.

Приветствуй вас на сайте Impuls-Web!

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

Я покажу вам несколько способов выравнивания картинки по центру html и css , которые вы сможете использовать в зависимости от ситуации.

Выравнивание картинки HTML

Кода вы верстаете страницу, и в каком-то единичном случае вы заранее знаете, что данное изображение должно быть по центру блока, то вы можете сделать выравнивания картинки по центру в html коде, обернув картинку в тег

Нужно выравнивать картинку по центру, а она не выравнивается. Кто может подсказать другие способы?

6 ответов 6

Отцентровать вертикально? Вы на верном пути.

Только по именам классов очень похоже, что вы используете bootstrap 2 , а в этом фреймворке для классов span* задано float: left , что противоречит display: table-cell . Укажите явно float: none .

Можно в CSS задать:

А сделать картинку фоном этого дива в бы не хотели?

Если нужно по горизонтали и вертикали выровнять по центру, то так:

Как выровнять HTML изображение по центру

  alexei ,  10/08/2020 — 08:53

Позиционирование и выравнивание изображений на странице HTML имеет решающее значение для макета страницы. Один из наиболее распространенных вопросов — как выровнять изображение по центру определенной секции. В этой статье мы обсудим множество возможных способов размещения изображений в центре заданной области.

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

Центрирование в параграфе

В первом примере мы покажем, как разместить изображение в центре элемента-контейнера, которым может быть элемент div, элемент параграфа и другие теги.

<p>
    <img src="//msiter.ru/image.jpg" alt="изображение в центре параграфа" />
</p>
<style>
.aligncenter {
    text-align: center;
}
</style>

Здесь всю работу делает CSS свойство text-align: center;. Если вы знаете код CSS, то вам ничего не нужно объяснять.

Центрирование при помощи отступов

Чтобы отцентрировать блоковый элемент, достаточно применить к нему стиль margin: auto;. Но известно, что тег img – это строковый элемент. Как же быть? Все очень просто. Чтобы все заработало, нужно сделать его блоковым применив CSS стиль display: block;.

<div>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</div>
<style>
.marginauto {
    margin: 10px auto 20px;
    display: block;
}
</style>

Центрирование при помощи тега <center>

Следует помнить, что тег <center> является устаревшим и не поддерживается в HTML5. Однако он все еще распознается веб-браузерами вроде Google Chrome.

Раньше это был предпочтительный метод, потому что он не требовал таблиц стилей, а только простой HTML.

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

<center>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</center>

Центрирование при помощи атрибута align=middle

Еще один устаревший метод, который не требует использования CSS, похожий на предыдущий пример. В более старых версиях HTML мы могли центрировать изображение, устанавливая атрибут тега align=»middle».

<img align="middle" src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />

Выравнивание изображения по центру по вертикали

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

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

<div>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</div>
<style>
.verticalcenter {
    display: table-cell;
    height: 400px;
    vertical-align: middle;
}
</style>

Одновременное центрирование по горизонтали и по вертикали

Мы можем комбинировать горизонтальное и вертикальное выравнивание, как показано в примере ниже.

<div>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</div>
<style>
.verticalhorizontal {
    display: table-cell;
    height: 300px;
    text-align: center;
    width: 300px;
    vertical-align: middle;
}
</style>

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

5 самых популярных JavaScript фреймворков в 2020 году

Наполнение сайта контентом

html — Центрировать блок изображений с помощью CSS

Вопрос задан

Изменено 4 года, 1 месяц назад

Просмотрено 608 раз

Новое! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Используя блочную модель, я создал сетку изображений 3 на 3. Я хотел, чтобы все изображения располагались по центру, поэтому я обернул все изображения в div и установил отступ слева на 10%. Это сработало, но я предполагаю, что это был неправильный способ сделать это, поэтому я прошу кого-нибудь сказать мне, что я должен был сделать вместо этого. HTML и CSS ниже…

 изображение {
  ширина: 30%;
  плыть налево;
  маржа: 0,1%;
  максимальная ширина: 700 пикселей;
}

.блокировать {
  заполнение слева: 10%;
} 
 <дел>
  • html
  • css

Вы, вероятно, захотите использовать сетку CSS для таких вещей. Ваш CSS будет выглядеть примерно так для сетки 3×3:

 .block {
  отображение: сетка;
  строки шаблона сетки: 1fr 1fr 1fr;
  столбцы сетки-шаблона: 1fr 1fr 1fr;
}

Вот рабочий пример

Если вы хотите узнать больше о сетках css, существует множество руководств.

Если вы не знаете, с чего начать, это довольно полезно.

Вы можете добиться этого, используя следующий CSS:

 .block {
    размер шрифта: 0;
    выравнивание текста: по центру;
    поле: 0 авто;
}
картинка {
    отображение: встроенный блок;
    ширина: 30%;
    максимальная ширина: 700 пикселей;
    вертикальное выравнивание: по центру;
    маржа: 0,1%;
}

Поправьте меня, если я ошибаюсь, но это будет центрировать блок, не так ли? Просто добавьте свой отступ к этому…?

 .блок {
поле слева: авто;
поле справа: авто;
}

1

 .блок {
    поплавок: нет;
    поле: 0 авто;
}

1

обновите свой css, как этот блок

{
    дисплей: гибкий;
    гибкая упаковка: упаковка;
}
заблокировать изображение{
    ширина: 33,33%;
}

2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

Вопрос задан

8 лет, 8 месяцев назад

Изменено 8 лет, 8 месяцев назад

Просмотрено 2к раз

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

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

Я знаю, что вы можете центрировать блок внутри другого блока, задав последнему фиксированную ширину и отступ : auto . Однако я заранее не знаю размеров текста (фактическое содержание текста может отличаться).

CSS, который у меня есть:

 .outer {
    ширина: 400 пикселей;
}
.внешняя таблица {
    граница: 0;
    ширина: 100%;
}
.внешняя таблица td {
    вертикальное выравнивание: посередине;
    выравнивание текста: по центру;
}
.внешняя таблица td p {
    выравнивание текста: по левому краю;
}
  • HTML
  • CSS

6

Пожалуйста, взгляните на это DEMO

Вот мой CSS:

 .block {
  выравнивание текста: по центру;
}
.блок: до {
  содержание: '';
  отображение: встроенный блок;
  высота: 100%;
  вертикальное выравнивание: посередине;
  поле справа: -0,25em; /* Настройка интервала */
}
. центр {
  отображение: встроенный блок;
  вертикальное выравнивание: посередине;
}
.оставил {
    плыть налево;
}

Пояснение к элементу :before:

Это псевдоэлемент невидимого элемента, который используется для лучшего вертикального центрирования: он эмулирует встроенный блочный элемент нулевого размера, который в сочетании с обычным встроенным блочным элементом (

.centered ) позволяет нам использовать вертикальное выравнивание .

ОБНОВЛЕНИЕ: Вы можете установить высоту .block , чтобы увидеть, как она будет центрирована по вертикали: http://jsfiddle.net/jb5EJ/5/

ОБНОВЛЕНИЕ 2: Это ближе: http://jsfiddle.net/jb5EJ/13/

4

Оформить заказ по этой ссылке. Я надеюсь, что вы получите решение.

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

TLDR: только с помощью этого CSS вы можете расположить элемент в абсолютном центре (как горизонтально, так и по вертикали):

 .

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

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