Как разместить изображение в центре, чтобы вокруг него был текст

Чтобы сделать с помощью CSS обтекание блочного или блочно-строчного элемента слева или справа, используется свойство float; однако у него нет значений, которые бы делали обтекание объекта, находящегося в центре. Поэтому такое сделать нельзя; но можно имитировать ситуацию. То есть сделать 5 блоков: 1 сверху, 3 в центре (средний из которых будет с изображением) и 1 снизу; для которых задать определённые размеры, отступы, обтекание и так далее; иными словами, подогнать всё позиционирование и все размеры под себя.

Пример

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Как разместить изображение в центре, чтобы вокруг него был текст</title>
		<style>

p.float-left, p.float-right, p.img-center {
				margin: 0;
				width: 33%;
			}

p.float-left, p.img-center {
				float: left;
			}

p.img-center {
				text-align: center;
			}

p.float-right {
				float: right;
			}

div.clear {
				clear: both;
			}

</style>
	</head>
	<body>

<h1>Как разместить изображение в центре, чтобы вокруг него был текст</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="float-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="float-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

p.float-left, p.float-right, p.img-center { margin: 0; width: 33%; }

определяем для 3-ёх центральных блоков: слева от блока с изображением, для самого блока с изображением и справа от него; следующие стили:

margin: 0;: убираем отступы, которые по умолчанию добавляются браузером абзацам <p>;
width: 33%;: задаём ширину блоков в 33%, чтобы они были примерно (33% + 33% + 33% = 99%) одинаковы.

p.float-left, p.img-center { float: left; }

прижимаем левый блок (p.float-left) от блока с изображением и сам блок с изображением (p.img-center) к левому краю, тем самым создавая обтекание их другими элементами справа.

p.img-center { text-align: center; }

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

p.float-right { float: right; }

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

div.clear { clear: both; }

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

25.12.2015