Правильно выравнивать изображение с помощью CSS HTML

Как правильно выравнивать изображение с помощью CSS.

Я не хочу, чтобы текст был wrap-around изображения. Я хочу, чтобы правильно выровненное изображение было на одной линии.

Ответы

Ответ 1

<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
   ...text...
</div>

jsFiddle.

Ответ 2

Поверните изображение справа, которое будет сначала, чтобы ваш текст обернулся вокруг него.

Затем, независимо от того, какой элемент next, установите его в {clear: right; } и все перестанет обертываться вокруг изображения.

Ответ 3

Существует несколько разных способов сделать это, но следующее - это быстрый выбор одного из способов.

<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>

Я использовал встроенные стили для этого примера, но вы можете легко разместить их в таблице стилей и ссылаться на класс или идентификатор.

Ответ 4

Чтобы изображение двигалось вправо:

float: right;

Чтобы текст не был завернут:

clear: right;

Для лучшей практики поместите код css в файл stylesheets. Когда вы добавите больше кода, это будет выглядеть грязно и трудно редактировать.

Ответ 5

Моим решением этой проблемы было установить display: inline на элемент изображения. При этом ваше изображение и текст будут выровнены по правому краю, если вы установите text-align: right из родительского контейнера.