Как сделать выравнивание картинки в CSS?

Размещена 3 сентабря, 2008 года

Для этого в CSS предусмотрено свойство float, которое определяет по какой стороне будет выравниваться элемент, и как другие элементы будут обтекать его с других сторон.

Синтаксис:

float: left | right | none

left — выровнять элемент по левому краю, при этом другие элементы (например, текст) огибают его по правой стороне.

right — выровнять элемент по правому краю, при этом другие элементы огибают его по левой стороне.

none — выравнивание и обтекание не задается.

Как прекратить обтекание картинки текстом?

Вставьте в текст в том месте где следует прекратить обтекание следущее:

<br style="clear: both">

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

Синтаксис:

clear: both | left | none | right

Картинка залезает на рамку родительского элемента, если к IMG применить float (IMG float border). Как предотвратить это?

Здесь поможет вставка элемента <div style="clear: both;"></div>

<div style="border:1px solid black">

  <img style="float: left" src="..." />

  <p>Текст который обтекает картинку</p>

  <div style="clear: both;"></div>

</div>

Хочу заметить, что вставка <BR style="clear: both;"> в данном случае не поможет браузеру IE.