Как расположить текст под картинкой в css

Текст под картинкой 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 насчет них обычно свои планы, и расставлять их они будут сами.

Как правильно реализовать текст под картинкой (html)?

Привет, я не знаю, как правильно реализовать текст под изображением в html .

Я еще новичок в html, буду очень признателен, если есть желание, то код напишите правильно. Ссылка на мой проект:

• Вопрос задан более двух лет назад
• 2371 просмотр

4 комментария

Простой 4 комментария

Delete User @lllllllllllll Автор вопроса

Сергей delphinpro @delphinpro Куратор тега CSS

Уберите жирный текст.
Вставьте картинки как следует, чтобы их видно было сразу (при условии, что на картинках не код)
Вставьте код как следует.

Это значительно повысит ваши шансы на адекватный ответ.

Мне вот вообще лень ходить по вашим ссылкам (уверен, не только мне)

gd1xza, у тебя закрыт доступ в гугл диске, да и скачивать никто скорее всего не будет, залей код сюда:
Jsfiddle

Решения вопроса 0
Ответы на вопрос 3

Верстальщик
Используйте flexbox
https://jsfiddle.net/dL4z65w2/66/
Ответ написан более двух лет назад
Комментировать
Нравится Комментировать

Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку

Если изображение контентное, что для подписи к нему есть пара специальных тегов figure и figcaption .
Там ничего не нужно изобретать, картинка и подпись сами встанут друг под другом.

(Если наоборот, картинка дополняет текст, например, изображение товара в инет магазине, то разметка будет другой. Название товара будет заголовком, дальше текст и т.д.)

Если картинка это украшение (иконка), то таких изображений не должно быть в разметке.
Они вставляются как фоны или псевдоэлементы через стили.

Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Так, кодирую по не многу.

Не знаю, может поможет 🙂
Суть в том что ты должен задать класс для одного общего контейнера, потом разместить картинки внутри этого контейнера. После чего уже нужно картинки обернуть еще одним div-контейнером и добавить span для текста. Затем в стилях в фале например style.css описать классы. Как отметил dethain можно использовать flexbox. что мы и сделали.

        /* но мы напишем стили тут. */ .__kakoy_to_class < display: flex; flex-wrap: wrap; width: 75%; margin: 0 auto; >.__item < width: 150px; height: 150px; margin: 20px; text-align: center; >.__kakoy_to_class img < width: 100%; height: auto; >.__item span  
  
 Text 
 
 Text 
 
 Text 
 
 Text 
 
 Text 
 
 Text 
 
 Text 
 
 Text 
 
 Text 
 
 Text 
 
 

Как написать текст рядом с картинкой?

Здравствуйте, помогите , пожалуйста. Я нашёл в интернете вёрстку psd. я весь контент уже сверстал , но столкнулся с такой проблемой , как: не получается сделать текст на одном уровне с картинкой. (см. скриншоты). Выровнить картинки я смог , но вот как текст сделать на уровне картинки,прижатый к ней, я не знаю. Буду признателен за ответ ))))))

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как сделать красивое появление текста рядом с картинкой при наведении
Всем привет. Я css плохо знаю, поэтому прошу помощи у Вас. Я выложу гифку, чтобы вы поняли о чем.

Вывод текста рядом с картинкой
Модуль на CMS Joomla 1.5 выводит контент из компонента К2(mod_k2_content) вот исходник: <?php.

Кнопка facebook рядом с картинкой
доброго времени суток 🙂 хочу добавить кнопку factbook — вопрос как сделать так чтобы справа от.

81 / 49 / 34
Регистрация: 22.05.2018
Сообщений: 192

Вот код. Как работает, смотрим здесь.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

div class="container"> section class="section"> div class="wrap"> time datetime="2010-07">JULY 2010/time> h2>Our Humble Beginnings/h2> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod mauris quis massa malesuada ornare. Aenean nunc nulla, viverra ut diam vulputate, euismod mollis est. Duis sed ex id nunc pretium lacinia. Aliquam erat volutpat. Pellentesque vulputate suscipit fringilla. Fusce accumsan egestas massa ac imperdiet. /p> /div> figure> img src="" width="100" height="100" alt=""> /figure> div class="empty"> /div> /section> section class="section"> div class="wrap"> time datetime="2010-07">JULY 2010/time> h2>Our Humble Beginnings/h2> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod mauris quis massa malesuada ornare. Aenean nunc nulla, viverra ut diam vulputate, euismod mollis est. Duis sed ex id nunc pretium lacinia. Aliquam erat volutpat. Pellentesque vulputate suscipit fringilla. Fusce accumsan egestas massa ac imperdiet. /p> /div> figure> img src="" width="100" height="100" alt=""> /figure> div class="empty"> /div> /section> section class="section"> div class="wrap"> time datetime="2010-07">JULY 2010/time> h2>Our Humble Beginnings/h2> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod mauris quis massa malesuada ornare. Aenean nunc nulla, viverra ut diam vulputate, euismod mollis est. Duis sed ex id nunc pretium lacinia. Aliquam erat volutpat. Pellentesque vulputate suscipit fringilla. Fusce accumsan egestas massa ac imperdiet. /p> /div> figure> img src="" width="100" height="100" alt=""> /figure> div class="empty"> /div> /section> section class="section"> div class="wrap"> time datetime="2010-07">JULY 2010/time> h2>Our Humble Beginnings/h2> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod mauris quis massa malesuada ornare. Aenean nunc nulla, viverra ut diam vulputate, euismod mollis est. Duis sed ex id nunc pretium lacinia. Aliquam erat volutpat. Pellentesque vulputate suscipit fringilla. Fusce accumsan egestas massa ac imperdiet. /p> /div> figure> img src="" width="100" height="100" alt=""> /figure> div class="empty"> /div> /section> /div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

* { margin: 0; padding: 0; } .container { width: 1200px; margin: 0 auto; } .section { width: 100%; margin: 50px 0; } .section:nth-child(2n) { display: flex; justify-content: space-between; flex-direction: row; text-align: right; } .section:nth-child(2n+1) { display: flex; justify-content: space-between; flex-direction: row-reverse; } figure { width: 200px; height: 200px; border: 1px solid #000000; border-radius: 50%; } .empty, .wrap, .figure { width: 33.33% }

Как расположить текст под картинкой в css

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

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

Схема документа

HTML-разметка

 
A Movie in the Park:
Kung Fu Panda
 

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

CSS

.image < position : relative; width : 100%; /* for IE 6 */ >h2

Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент является блочным элементом, то его мы использовать для этих целей не можем. Воспользуемся inline-элементом . Обернём в него текст внутри заголовка.

A Movie in the Park:
Kung Fu Panda

Будем использовать этот span для оформления текста и фона:

h2 span < color : white; font : bold 24px/45px Helvetica, Sans-Serif; letter-spacing : -1px; background : rgb(0, 0, 0); /* на случай, если следующая строка не сработает */ background : rgba(0, 0, 0, 0.7); padding : 10px; >

Проблемы

Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.

Чтобы решить проблему, необходимо использовать дополнительные span-ы по обе стороны от тега
, в этом случае мы уже сможем воспользоваться padding-ом.

 
A Movie in the Park:   

Этим новым span-ам мы зададим свойство padding:

h2 span.spacer

Что на счёт семантики?

На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:

 
A Movie in the Park:
Kung Fu Panda
 

$(function() < $("h2").wrapInner(""); $("h2 br").before(");