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

Содержание

html — Как сделать выравнивание картинок по нижнему краю и прижать их к тексту?

Вопрос задан 5 лет 10 месяцев назад

Изменён 1 месяц назад

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

Добрый день! Есть div следующего вида:

.wrapper,
.wrapper ul {
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

<div>
  <ul>
    <li>
      <div><img src="/img/inf/1.png" /></div>
      <p>Lorem ipsum</p>
    </li>

    <li>
      <div><img src="/img/info/2.png" /></div>
      <p>Lorem ipsum</p>
    </li>

    <li>
      <div><img src="/img/info/3.  png" /></div>
      <p>Lorem ipsum</p>
    </li>

  </ul>
</div>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>

Как выровнять картинки по нижнему краю и прижать их к тексту?

html
css
css3

У li задайте:

.wrapper ul li{
  display:inline-block;
}

Отступ идет от элемента p. Чтобы убрать его:

.wrapper ul li p{
  margin-top:0;
}

.wrapper,
.wrapper ul {
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}
.wrapper ul li{
  display:inline-block;
}
.wrapper ul li p{
  margin-top:0;
}

<div>
  <ul>
    <li>
      <div><img src="/img/inf/1.png" /></div>
      <p>Lorem ipsum</p>
    </li>

    <li>
      <div><img src="/img/info/2.
  png" /></div>
      <p>Lorem ipsum</p>
    </li>

    <li>
      <div><img src="/img/info/3.png" /></div>
      <p>Lorem ipsum</p>
    </li>

  </ul>
</div>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>

Решение с применением flexbox:

.wrapper,
.wrapper ul {
  display:flex;
  justify-content:center;
}
.wrapper ul li{
  list-style: none;
  padding: 0 5px;
}

<div>
  <ul>
    <li>
      <div><img src="https://dreamgold.ua/image/catalog/lazyrite/souvenirs/3057.jpg" /></div>
      <p>сложность</p>
    </li>

    <li>
      <div><img src="https://dreamgold.ua/image/catalog/lazyrite/souvenirs/3058_1.jpg" /></div>
      <p>не в выборе</p>
    </li>

    <li>
      <div><img src="https://dreamgold.  ua/image/catalog/lazyrite/souvenirs/3057_1.jpg" /></div>
      <p>а в количестве вариантов</p>
    </li>

  </ul>
</div>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>

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

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

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

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

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

Почта

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

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

Почта

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

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

CSS — Отцентровать картинку в контейнере.

| PHPClub

JavaScript отключён. Чтобы полноценно использовать наш сайт, включите JavaScript в своём браузере.

Необходимо горизонтально и вертикально отцентровать картинку <img> произвольного размера во внешнем контейнере с заданными размерами так, чтобы если даже размеры картинки больше размеров контейнера, картинка бы оставалась отцентрованой, и ее края прятались бы за краями контейнера — то есть, центр картинки должен в любом случае совпадать с центром контейнера.

Результат должен быть аналогичен тому, что можно добиться, установив картинку в качестве заднего плана для контейнера, позиционировав его в центре и запретив ему повторяться. Однако в данном случае принципиально, что используется элемент img.
На данный момент удалось реализовать задумку в ИЕ и Опера. Возможно, кто-то знает, что надо сделать, для того, чтобы этот код работал бы в ФФ тоже.
Код:
[SIZE=2] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Center</title> <style type="text/css"> span { float: left; border: 1px solid black; margin: 1px; overflow: hidden; width: 75px; height: 75px; position: relative; } a { position: absolute; left: 50%; top: 50%; } img { position: relative; left: -50%; top: -50%; vertical-align: middle; border: 0px; } </style> </head> <body> <span><a href="#"><img src="http://farm1.

static.flickr.com/49/148093302_acb4062fbd_m.jpg" alt="big"></a></span> <span><a href="#"><img src="http://farm1.static.flickr.com/79/buddyicons/[email protected]?1161129422" alt="small"></a></span> </body> </html> [/SIZE]

kost
Новичок

18 Май 2007

Хагстрем
10:11 8 февраля 2004 г. (GMT 0)

«Одна из целей CSS — предоставить альтернативу расширениям HTML».
Больше времени, чем я готов признать, я изо всех сил пытался выяснить, как центрировать изображения с помощью CSS. К сожалению, спецификации HTML [w3.org] говорят вам только о том, как центрировать text с помощью
text-align:center
.
Это решение работает с Internet Explorer, заставляя людей (таких как я) поверить, что это правильный способ сделать это. Но это не так.
Правильный способ центрировать объекты — указать
margin-left:auto
и
margin-right:auto
.
Это объясняется в спецификациях CSS [w3.org].
Это не сработает для некоторых объектов, например изображений!
Причина в том, что изображения не считаются блоками даже несмотря на то, что они четырехугольные!
Итак, вы должны указать
display:block
.
К сожалению, это не работает со старыми версиями Internet Explorer (я пробовал IE4).
Итак, вам нужно добавить
text-align:center
.
Это не проблема для изображений, но если вы используете text-align:center для центрирования текстового объекта, ваш текст также будет центрирован, поэтому вам придется вложить два объекта (например,
внутри )
Итак, результат:

Присоединяйтесь к беседе
Зарегистрируйтесь бесплатно! — Стать профессиональным участником!
Посмотреть категории форума — Войти на форумi>
Модераторы и ведущие участники
Список модераторов | Ведущие участники: на этой неделе Этот месяц, декабрь, ноябрь, Архив, 100 лучших за все время, Участники с наибольшим количеством голосов
Горячие темы на этой неделе
Обновления Google и изменения в поисковой выдаче — май 2022 г.
Доходы и наблюдения AdSense за май 2022 г.
~ удалить с URL
Потерянный бизнес-потенциал при создании веб-сайтов
по-прежнему получает URL-адреса параметров, сканируемые Google
Маск заявил, что сделка с Твиттером на 44 миллиарда долларов отложена
Что вы думаете об Android?
Использование cURL для поиска конечного результата перенаправления 301
Влияет ли сокращение контента для мобильных устройств на SEO?
Всем привет
Избранные темы
Дом
Индекс форумов
Код, контент и представление/CSS 00:07 8 января 2023 г.
Когда несколько месяцев назад DMC запустил наш новый веб-сайт, мы были очень довольны некоторыми новыми навыками и приемами, которым научились. Одной из областей, где я изучил гораздо больше, в частности, были CSS, или каскадные таблицы стилей, и теги стилей html.
Нам пришлось решить одну проблему, связанную с центрированием изображений переменного или неизвестного размера. Мы используем модуль ротатора контента на нашем сайте. Для Dot Net Nuke доступно множество модулей ротатора контента. Мы использовали ротатор контента от компании MexMax.
На нашей домашней странице вы заметите, что мы используем этот ротатор контента для прокрутки списка наших клиентов. Чтобы макет был приятным для глаз, нам пришлось центрировать все изображения. Если вы поищете учебник о том, как это сделать, вы обнаружите, что все они включают жесткое кодирование значений высоты и предполагают, что вы знаете размер вашего изображения и размер пространства, в которое вы пытаетесь его поместить. Мы могли бы Я использовал это и пошел по пути всегда заставляя клиентские логотипы иметь одинаковый размер, но я хотел что-то более модульное.