Как сделать чтобы картинка и текст были на одном уровне html

Как сделать чтобы каждый div картинка + текст были на одном уровне по высоте?

Здравствуйте, подскажите пожалуйста как сделать чтобы каждый div картинка + текст были на одном уровне по высоте?
Какой добавить в div css стиль?))

• Вопрос задан более трёх лет назад
• 1491 просмотр

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

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

ProjectSoft @ProjectSoft

Выравнивание картинки и текста на одном уровне

Доброго времени суток! У меня возникла проблема при верстке. Никак не могу сделать данный текст и картинку на одном уровне. Помогите разобраться. Вот код:

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

div class="about_right"> h1>July 2010/h1> h1>Our Humble Beginnings/h1> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p> img src="img/about1.jpg"> /div> div class="about_left"> h1>July 2010/h1> h1>Our Humble Beginnings/h1> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p> img src="img/about2.jpg"> /div> div class="about_right"> h1>July 2010/h1> h1>Our Humble Beginnings/h1> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p> img src="img/about3.jpg"> /div> div class="about_left"> h1>July 2010/h1> h1>Our Humble Beginnings/h1> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p>

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

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

RxRichEdit выравнивание текста и картинки
Доброго дня установил компоненты rxlib разместил у себя на форме объект rxrichedit в свойствах.

Выравнивание текста справа от картинки
Возник вопрос , как сделать текст сразу после картинки ? Пример во вложении

Выравнивание картинки относительно текста, CSS
Добрый день, очень хочется получить помощь в простом вопросе, но перепробовал все коды, что нашел.

154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351
Стилей вообще никаких нет?
Регистрация: 01.04.2016
Сообщений: 77

Стили мне сейчас не обязательны. Мне сначала с позиционированием разобраться, а потом займусь и стилями

154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351

Сообщение было отмечено AndyFEED как решение

Решение

Сообщение от AndyFEED

Мне сначала с позиционированием разобраться
это можно сделать с помощью flexbox :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

div class="about_right"> div class="text_wrap"> h1>July 2010/h1> h1>Our Humble Beginnings/h1> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p> /div> div class="image_wrap"> img src="img/about1.jpg"> /div> /div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.about_right { display: flex; flex-flow: row nowrap; align-items: center; } .about_right .text_wrap { text-align: right; } .text_wrap { padding: 0 30px 0 0; flex: 0 1 50%; } .image_wrap { flex: 0 0 auto; border-radius: 50%; overflow: hidden; }

Регистрация: 01.04.2016
Сообщений: 77
Уже все сделал сам) Вот:
Кликните здесь для просмотра всего текста

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 56 57 58 59 60 61 62 63 64 65 66 67 68

div style="overflow: hidden;"> div id="about_first" style="width: 100%;"> div class="about_text_right" style="float: left; width: 250px; height: 185px;"> h1>July 2010/h1> h4>Our Humble Beginnings/h4> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p> /div> div class="about_img_right" style="float: left; width: 100px; height: 185px;">img src="img/about1.jpg"> /div> /div> /div> div style="overflow: hidden;"> div id="about_second"> div class="about_text_left" style="float: right; width: 250px; height: 185px;"> h1>January 2011/h1> h4>Facing Startup Battles/h4> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus. /p> /div> div class="about_img_left" style="float: right;">img src="img/about2.jpg"> /div> /div> /div> div style="overflow: hidden;"> div id="about_first" style="width: 100%;"> div class="about_text_right" style="float: left; width: 250px; height: 185px;"> h1>December 2012/h1> h4>Enter The Dark Days/h4> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni. /p> /div> div class="about_img_right" style="float: left; width: 100px; height: 185px;">img src="img/about3.jpg"> /div> /div> /div> div style="overflow: hidden;"> div id="about_second"> div class="about_text_left" style="float: right; width: 250px; height: 185px;"> h1>february 2014/h1> h4>Our Triumph/h4> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean. /p> /div> div class="about_img_left" style="float: right;">img src="img/about4.jpg"> /div> /div> /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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

.about_text_right h1 { color: #222; font-size: 18px; text-align: right; margin: 0; line-height: 1.55em; } #about_first { padding-left: 90px; margin-top: 90px; } .about_text_right p { color: #777; font-size: 14px; text-align: right; margin: 0; line-height: 1.55em; } .about_text_left h1 { color: #222; font-size: 18px; text-align: left; margin: 0; line-height: 1.55em; } .about_text_left h4 { color: #222; font-size: 18px; text-align: left; margin-top: 5px; margin-bottom: 5px; line-height: 1.55em; } .about_text_right h4 { color: #222; font-size: 18px; text-align: right; margin-top: 5px; margin-bottom: 5px; line-height: 1.55em; } #about_second { padding-right: 100px; margin-top: 90px; } .about_text_left p { color: #777; font-size: 14px; text-align: left; margin: 0; line-height: 1.55em; } .about_img_right { margin-left: 30px; } .about_img_left { margin-right: 30px; }

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

Как поставить картинку рядом с текстом, например чтобы картинка находилась с правой стороны от текста?

• Вопрос задан более трёх лет назад
• 18021 просмотр

Комментировать

Решения вопроса 3

Артур @artur_kudaev

Frontend Developer

float: right

Ответ написан более трёх лет назад

Нравится 1 2 комментария

Евгений @Kasperenysh

Или display: flex;

Opiatov_krug @Opiatov_krug Автор вопроса

не рааботает

Вообще будет шикарно если вы выложите html и css вашего проекта сюда для понимания, а то может какие то стили уже прописаны и мешают отображению как вам нужно.
Ну как вариант — обернуть текст в параграфе и картинку в блок. Блоку дать стиль display: flex;

 
Текст
 

Ответ написан более трёх лет назад

Правильный HTML код картинки или оптимизация изображения сайта | HTML & SEO

Зачем нужна SEO оптимизация изображения для поисковиков?

Поисковый робот не может понять что изображено на фотографии. Оптимизируя картинки (подробные рекомендации Гугла, Яндекса) мы даём сигнал поисковой системе, что наш рисунок нужно показывать по таким-то фразам [что такое ключевые слова].

С некоторых пор, у человека нет нужды переходить на сайт, так как и в Яндекс.Картинках, и в Google.Картинках фото представлены в полный рост, а не миниатюрами. Фактически это плагиат поисковыми гигантами изображений вебмастера. А значит были и случаи судебного разбирательства, когда Google выплачивал определённые суммы, и закрытие от индексации изображений в robots.txt или с помощью HTTP заголовока.

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

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

Параметр scr

src — адрес файла рисунка. Наиболее популярны форматы JPEG, PNG и GIF.

1. был осмысленным,
2. написан латинскими буквами, если домен вида shpargalkablog.ru; или кириллическими при шпаргалкаблог.рф,
3. строчными символами,
4. в качестве разделителя слов использовалось тире, а не пробелы.

Атрибут alt

alt — альтернативный текст фотографии, видимый в браузере, если не отобразится изображение. В данном тексте желательно использовать ключевые слова, но не все подряд, а именно те, которые относятся к картинке. Длину делать желательно не более 16 слов в Google [эксперимент Devaka] или 280 символов для Яндекса [эксперимент Devaka].

Советую ко всем рисункам прописывать этот параметр, поскольку в Спецификации HTML он обозначен как «необходимый».

alt="текст" />

Атрибут title

title применяется, если нужно показать всплывающую подсказку при наведении курсора мыши на фотографию. В отличии от alt, title не уделяется столь большого значения для тега , а, следовательно, его использование не обязательно [см. более подробные исследования].

title="текст1" />

Пример (наведите на смайла курсор мышки):

Атрибут width×height

1. width — ширина изображения,
2. height — высота изображения.

Они должны совпадать с реальными размерами файла. Иначе говоря, если меняете размер фото, то нужно менять и размер файла картинки [тут эта мысль раскрыта более доходчиво].

width="значение" height="значение" />

Для резиновых сайтов предложено несколько техник. Я ограничилась пока таким незамысловатым кодом (он далёк от идеала):

@media (max-width: 59em) < img >

То есть пока максимальная ширина экрана не достигла 59em нужно использовать данные, прописанные в теге img. При ширине экрана меньше 59em рисунок становится резиновым.

Как убрать рамку вокруг картинки в IE

По умолчанию рамка вокруг изображения в Internet Explorer отображается в случае, когда фото является ссылкой. Чтобы её убрать, нужно прописать стиль CSS:

Как расположить картинку по центру блока

 style="display: block; margin: 0 auto;"/>

Как расположить картинку на одном уровне с текстом (по центру строки)

То есть не так . Свойственно для маленьких смайликов.

А так , что выглядит более эстетично.

 style="vertical-align: middle;"/>

Как расположить картинку справа от текста

 style="float: right; margin: 0 5px;"/> Остальное содержание.

Как сделать чтобы картинка обтекала текст слева

 style="float: left; margin: 0 5px;"/> Остальное содержание.