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

Leave a Comment / Css / By /

html — Выравнивание по центру картинки

Вопрос задан

Изменён 6 лет 2 месяца назад

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

Есть блок.

.photo{
    border:1px solid #e3e3e3;
    text-align:center;
    width:530px;
    height:458px;
}
    
.photo img{
    max-width:500px;
    max-height:400px;
}
<div>
  <a href="/<?=$gallery[0]->img?>" data-lightbox="roadtrip" title="my caption">
    <img src="/<?=$gallery[0]->img?>" alt="<?=$product->title?>">
  </a>
</div>

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

<td valign="middle">
    Фото
</td>
  • html
  • css
. photo {
  border: 1px solid #e3e3e3;
  text-align: center;
  width: 530px;
  height: 458px;
}
.photo:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.photo img {
  max-width: 500px;
  max-height: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}
<div>
  <a href="/<?=$gallery[0]->img?>" data-lightbox="roadtrip" title="my caption">
<img src="/<?=$gallery[0]->img?>" alt="<?=$product->title?>">
</a>
</div>

Попробуйте так:

.photo {
  border: 1px solid #e3e3e3;
  display: table-cell;
  height: 458px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 530px;
}
.photo img{
  max-width:500px;
  max-height:400px;
}

.photo {
    position: relative;
    left: 50%;
    float: left;
}
.photo img {
    position: relative;
    right: 50%;
}

Ещё проще и понятней использовать flexbox для выравнивания.

1й вариант

.photo {
  display: flex;
  /* Горизонтальное выравнивание по центру */
  align-items: center;
  /* Вертикальное выравнивание по центру */
  justify-content: center;
}

2й вариант

.photo {
  display: flex;
}
.photo > a {
  /* выравнивание и по горизонтали, и по вертикали */
  /* если надо только по вертикали то задайте margin: auto 0; */
  margin: auto;
}

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Абсолютное позиционирование в CSS: понять раз и навсегда

Вы все еще не понимаете как работает абсолютное позиционирование в CSS и теряете элементы на экране? Давайте разбираться в этой магии.

Введение в позиционирование

Когда вы устанавливаете
position: absolute, на первый план выходит не сам элемент, а его родительский контейнер, ведь относительно него и осуществляется позиционирование в CSS. Сложность в том, что это не всегда непосредственный родитель элемента.

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

<body>
<div>
  <div>
    <div>
      <div></div>
    </div>
  </div>
</div>
</body>

Блоки box-1, box-2 и box-3 для красоты отцентрированы с помощью свойств margin: auto и свойств flex CSS. Блок box-4 остается в своей дефолтной позиции в потоке документа.

body {
  display: flex;
}

.box-1,
.box-2,
.box-3 {
  display: flex;
  margin: auto;
}

Все 4 элемента имеют позиционирование по умолчанию. На данный момент верстка выглядит следующим образом:

.box-4 без позиционирования

Относительно чего позиционируем?

Чтобы спозиционировать себя, элемент должен знать две вещи:

  • какой родитель станет точкой отсчета;
  • величину смещения относительно точки отсчета (сверху, снизу, справа или слева).

Если определить position: absolute для box-4, этот элемент покинет нормальный поток документа. Но сейчас он остается на своем месте, так как координаты смещения не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).

.box-4 с абсолютным позиционированием без смещения

Теперь добавим свойства top: 0 и left: 0. Элемент должен определить, какой родительский контейнер станет точкой отсчета для этих координат. Ей становится ближайший элемент с нестатической позицией (чаще всего position: relative). box-4 начинает поочередно опрашивать своих предков. Ни box-3, ни box-2, ни box-1 не подходят, так как имеют позиционирование в CSS по умолчанию (unset).

Если позиционированный предок не нашелся, элемент размещается относительно тела документа (body):

.box-4 с абсолютным позиционированием. Родительские элементы без позиционирования

Если установить

position: relative для элемента box-1, точкой отсчета станет он:

.box-4 с абсолютным позиционированием. .box-1 с относительным позиционированием

Абсолютно позиционированный элемент располагается относительно ближайшего позиционированного предка.

Как только точка отсчета нашлась, все, что выше нее в DOM-дереве, перестает иметь значение.

Если установить position: relative также для box-2, то box-4 будет позиционироваться относительно него, ведь этот предок ближе.

.box-4 с абсолютным позиционированием. .box-2 с относительным позиционированием

Аналогично и для контейнера box-3:

. box-4 с абсолютным позиционированием. .box-3 с относительным позиционированием

А вот и наглядный красивый CSS-пример поиска позиционированного предка:

Перевод статьи How to understand CSS Position Absolute once and for all.

Еще больше полезных статей по CSS:

  • 7 простых способов писать по-настоящему ужасный CSS
  • Адаптивные изображения: 5 трюков CSS для экономии времени
  • 15 интересных CSS и JavaScript библиотек на апрель 2018
  • Тест: насколько хорошо вы знаете CSS

Невозможно выровнять изображение по середине — HTML и CSS — Форумы SitePoint

система

1

У меня есть простой HTML-файл, который я создал. Я пытаюсь выровнять изображение по центру. Я думаю, что сделал это так же, как говорит W3C, но это не работает. Когда я просматриваю страницу, выравнивание по правому краю работает, но среднее и левое выравниваются по левому краю. Я не понимаю, почему.


<голова>
Мой сайт

<тело>
логотип

В настоящее время веб-сайт находится в разработке. Пожалуйста, зайдите позже!


Авторское право © 2009 г.mywebsite.org
Все права защищены.

Не знаю, что я делаю не так.

система

2

Ну, я посмотрел в своем учебнике для класса, и я нашел способ обойти это.


<голова>
Мой сайт

<тело>
<дел>
 png" alt="логотип" />

В настоящее время веб-сайт находится в разработке. Пожалуйста, зайдите позже!

Авторское право © 2009 г.mywebsite.org
Все права защищены.

Это правильный путь или я ошибаюсь? Это исправление только что пришло мне в голову, но я не уверен, что оно правильное.

Алекс Доусон

3

Проблема в том, что вы используете «float: middle;», нет такого значения float, как middle, что и вызывает проблему. Использование align: center в div будет работать так, как вы хотите (если сомневаетесь, попробуйте), но с выравниванием на месте в div вы также можете удалить те, что находятся в его дочерних элементах (выравнивания в p и которые плавают в img).

Надя_П

14 сентября 2009 г. , 13:16

4

Вместо этого попробуйте следующее. Все стили были вынесены из html и помещены в заголовок документа: (я добавил комментарии к стилям, чтобы вы могли видеть, какие правила стилизуют те или иные элементы на странице).



<голова>

Мой сайт
<тип стиля="текст/CSS">
/* верхний div, содержащий изображение */
#верхнийконтейнер {
    ширина: 100%;
    выравнивание текста: по центру;
}
/* div для хранения нижней информации — назвал его нижним колонтитулом */
#нижний колонтитул {
    ширина: 100%;
}
/* оформляет абзацы в нижнем колонтитуле — также выравнивает текст по центру */
#нижний колонтитул р {
    размер шрифта: 12px; /* меняем размер шрифта по мере необходимости */
    выравнивание текста: по центру;
}
 

 


<тело>
<дел>
 png" alt="логотип" />
<дел>

В настоящее время веб-сайт находится в разработке. Пожалуйста, зайдите позже!

Авторское право © 2009 г.mywebsite.org
Все права защищены.

система

5

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

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

Дэвид Чайлдресс

6

Hello RusticProgrammer,

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

  1. указать браузеру отображать то, что НОРМАЛЬНО было бы встроенным изображением, как блочный элемент. в CSS блочные элементы автоматически заполняют все доступное пространство. Таким образом, если изображение становится блочным элементом, его поля будут увеличиваться, пока не достигнут краев окна браузера 9.0066

display: block

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

margin-left: auto
margin-right: auto

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

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

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

система Закрыто

7

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

 

Изображение говорит тысячу слов.

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

Изображения являются основным компонентом современных веб-страниц. Без их использования страница не привлекает внимание. Использование правильного изображения для выражения добавляет ценность содержанию страницы.

Мы узнаем, как добиться этого с помощью CSS. Мы будем использовать свойство margin-right и margin-left для центрирования изображения со значениями обоих свойств, установленными на auto. Но важным свойством является отображение , которое рассматривает изображение как блочный элемент и помогает нам перемещать изображение по веб-странице. Значение свойство отображения должно быть установлено как «блок». Помните, что это важное свойство для выравнивания изображения.

Посмотрим с помощью кода.

Код HTML:

 
<голова>

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


<тело>
 
 Как центрировать изображение 
 

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

Париж

Имя файла CSS: centerimage.css

 img {
дисплей: блок;
поле слева: авто;
поле справа: авто; 
 }

Вот что будет на выходе:

См. также: 

CSS-центрирование (текст и изображения) с помощью Angular 11 Пример

Как создать закругленные изображения .

Я уверен, вы бы это заметили. Ну, чтобы добиться этого на нашей веб-странице, мы используем свойство border-radius с разными значениями. Мы рассмотрим два одинаковых изображения рядом. Один с использованием имущества, а другой без. Атрибут стиля, используемый в теге img, устанавливает ширину изображения в 20 пикселей, а идентификатор, присвоенный тегу img, поможет отличить форму изображения.

Давайте посмотрим:

Код HTML будет следующим: —

 
<голова>
  
 Как создавать закругленные изображения 


<тело>
 
Скругленные изображения
 
Аватар
Аватар

Файл CSS: Roundedimage.css

 #i1 {
  радиус границы: 50%;
  поле слева: 100px;
}
#i2 {
  поле слева: 250px;
}

Вывод приведенного выше кода будет следующим:

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

Теперь давайте узнаем, как использовать свойство border , чтобы создать рамку вокруг изображения, которую можно стилизовать, чтобы она выглядела как фоторамка. Используемые здесь значения границы : «10 пикселей», что определяет толщину границы, «сплошная» определяет тип границы, а «зеленый» добавляет цвет к толщине, определенной ранее. Вы можете заменить эти значения соответствующими, чтобы получить желаемое изменение. Кроме того, другие используемые здесь свойства предназначены для центрирования изображения после его преобразования в блочный элемент.

Код HTML:

 
<голова>
   Как добавить границу к изображению 
  

<тело>
   
 Граница вокруг изображения 
 
  
 Использование свойства border для создания рамки вокруг изображения.

  Снег

Файл CSS:Borderimage.css

 img {
  граница: сплошной зеленый 10 пикселей;
  дисплей: блок;
  поле справа: авто;
  поле слева: авто;
  ширина: 350 пикселей;
}

Вот что будет на выходе:

 

Вывод:

В этом уроке мы узнали, как сначала центрировать изображение, используя свойства margin-right и left.