Как картинку поставить по центру в css

Сделать изображение по центру

Каким образом выравнить изображение, чтобы оно сверху автоматически отступало, как показано на скриншоте? Пытался химичить с vertical-align , но ничего не вышло.

.item

http://jsfiddle.net/0e2dLzqp/1/ Решение не должно быть на CSS3 и на JS.
Отслеживать
задан 1 дек 2015 в 17:27
3,676 8 8 золотых знаков 53 53 серебряных знака 137 137 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

vertical-align работает только при наличии line-height , в данном конкретном случае, у родителя.

.image < background: #cccccc; text-align: center; height: 250px; line-height: 250px; >.image img

Отслеживать
80.8k 9 9 золотых знаков 78 78 серебряных знаков 134 134 бронзовых знака
ответ дан 1 дек 2015 в 17:39
1,932 12 12 серебряных знаков 24 24 бронзовых знака
Отлично! Спасибо Вам огромное <3 1 дек 2015 в 17:47 height можно было и не задавать. 1 дек 2015 в 18:54

@ModaL, не за что =) @vadim-kot, я не знаю, для каких именно целей его добавил топикстартер. Вдруг без height не будет работать его дальнейшая задумка.

2 дек 2015 в 13:04

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Текст под картинкой CSS

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

 
 
ТекстТекстТекстТекстТекст
 
 
 
ТекстТекстТекстТекстТекст
 
 
 
ТекстТекстТекстТекст
 
 
 
ТекстТекстТекстТекстТекст
 
 
 

По повоуду стилей, то исользовал flex-ы.

Отслеживать
задан 27 апр 2018 в 9:58
tttyyyrrrryyy tttyyyrrrryyy
121 2 2 серебряных знака 9 9 бронзовых знаков
> «Обернуть картинку в еще один блок и задать размеры? «, да оптимальнее будет так
27 апр 2018 в 10:02
а можно выложить css ваш?
28 апр 2018 в 22:28

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Можно задать картинкам фиксированную высоту, и задать свойство object-fit

img.service

P.S. Старайтесь не использовать в верстке заголовков h вообще. У SEO насчет них обычно свои планы, и расставлять их они будут сами.

CSS — разместить объект точно по центру блока

Перевод небольшой статьи с замечательного сайта для веб-дизайнеров CSS-Tricks.

Статья посвящена одному интересному моменту — как правильно точно отцентрировать один объект с фиксированными размерами внутри другого. В принципе ничего сложного (и большого секрета) в этом нет, но статья мне понравилась, поэтому решил перевести и разместить у себя. Особенно хороши картинки — глядя на них, можно и текст не писать — все наглядно понятно. Далее — вольный перевод статьи Криса Койера:

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

В результате изображение разместиться точно по центру экрана:

Jest — использование skip

В Karma\Jasmine есть варианы для игнорирования выборочных тестов — xit, xdescribe. В этом посте — разберусь, какие есть варианты для этог. … Continue reading

Как расположить текст слева, а блок справа?

Нужна помощь. Кто знает, как сделать так, чтобы текст был слева, а справа был border. Попробовал обтекание (float) — не получилось. Border с текстом и изображением. Изображение выше, набросок того, что у меня должно получиться.

#id1 < padding: 10px; background-color: #222222; border: 1px solid #a2a9b1; width: 300px; float: right; color: white; >#id2

Отслеживать
11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков
задан 8 авг 2020 в 10:30
SamSamovich SamSamovich
53 6 6 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

body < padding: 0 20px; >#id1 < float: right; width: 200px; padding: 10px; border: 1px solid black; >#id2

текст текст текст текст текст текст текст текст текст текст текст текст текст
 
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Отслеживать
ответ дан 8 авг 2020 в 10:43
11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков
огромное спасибо, сработало.
8 авг 2020 в 10:53

• css
• вёрстка

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.