#html #css
#HTML #css
Вопрос:
Я использую тег img перед тегом h3, операторы break не используются. Но когда я запускаю его в браузере, он отображает 2 тега в отдельных строках. Существует ли метод CSS, который может исправить это, или, может быть, еще более простой атрибут тега, который заставит два элемента отображаться в одной строке?
Заранее спасибо!
——————————- редактировать ———————————————-
Ответы пока работают хорошо. Но этого еще нет. Если вы посмотрите на скриншот, вы увидите, что я хочу (я должен был указать в первую очередь, я знаю)…
Если я использую один из описанных выше методов, вы увидите, что тег h3 не находится в середине тега img. Я хочу, чтобы тег h3 плавал прямо в середине изображения..
Комментарии:
1. Почему не flexbox? Вы пробовали использовать flexbox?
Ответ №1:
Стиль тегов заголовка по умолчанию ( <h1>
to <h6>
) содержит display: block
. Присвоение вашему <h3>
тегу стиля display: inline
переопределит это поведение.
Комментарии:
1. Работает хорошо, но, пожалуйста, взгляните на мою правку к моему сообщению выше. Я ищу кое-что дополнительное..
Ответ №2:
Два варианта:
-
Используйте
line-height
атрибут, дляh3
которого равно вашемуimg
.height
-
Используйте
padding-top
иpadding-bottom
для вашегоh3
и играйте с ним, чтобы получить то, что вы хотите.
Ответ №3:
Вы имеете в виду исходный код или фактические элементы? Если вы имеете в виду фактические элементы, добавьте float: left;
к ним оба, и они будут отображаться рядом.
Ответ №4:
Что, если вы поместите <img>
тег внутри <h3>
блока, например
<h3><img src=".." /> Hello world!</h3>
Ответ №5:
При использовании HTML мы сталкиваемся с проблемой. Если мы используем <img>
<h1>
теги и , оба не будут находиться в одной строке. Есть одно решение для размещения их в одной строке — использовать img
тег внутри h
тега:
<h2><img src="">Text here</h2>