float: center does not actually exist, for reasons I will explain shortly. But it is possible to fake it. This is such a neat trick that I wish I had come up with it, but credit goes to Chris Coyier; what is shown here is merely my responsive variation on his technique.

I’m often asked “if there’s float: left and right, why isn’t there a float: center ?” A few answers:

1. text-align: center already covers most cases.
2. text wrapped on both sides of an image makes lines in a paragraph extremely difficult to scan, unless the text is treated very carefully. Usually this means division of text into columns, which is a separate issue entirely.
3. float should really be called wrap when it comes to text. float: left simply means “put this element on the left side of its container, and wrap everything that follows to its right”. In this context, our theoretical float: center would really be wrap: both, which brings up an entire suite of issues (how do you determine how “deep” the element is inside its container element?).

To use this technique, we build a separate <div> for each column, and divide our text between them. In my variation, the image we want to use between the columns is placed in the start of the first <div>, and floated right.

<div id="container">
	<div id="leftcol">
		<p><img src="kyoto-monk.jpg" alt="Photograph of a Buddhist monk in front of kabuki theatre, Kyoto">Kyoto, located on the island of Honshu, was once Japan’s imperial capital. The city is Japan’s cultural centre, best known for its gardens, traditional architecture, university, and the Nintendo game company, which has its headquarters in the city.
		</div>
<div id="rightcol">
	<p>Kyoto was largely spared from the physical destruction of WWII. It was removed from its place at the top of the target list for the atomic bomb by the intervention of the US Secretary of War Henry L. Stimson, who had honeymooned there.
	</div>
</div>

Then we give each <div> an equal width by setting each to display: table-cell:

div#leftcol, div#rightcol {
	display: table-cell;
	padding: 1em;
}

So far, we have a fairly conventional layout: two column divs, with one holding a floated image. The trick lies in two parts: first, we displace the image by using a negative margin-right on it. This displacement is just over half the width of the image:

div#container {
	display: table;
	width: 80%;
	margin: 0 auto;
	max-width: 900px;
	line-height: 1.5;
}
div#container img {
	width: 55%;
	height: auto;
	margin-right: -20%;
	margin-left: 20px;
	float: right;
	margin-bottom: 20px;
}
div#leftcol, div#rightcol {
	display: table-cell;
	padding: 1em;
}
div#leftcol { width: 50%; }
div#rightcol { width: 40%; }

The second part of the trick is to use generated content for the second <div> that is sized to slightly more than half the width and a little more then the full height of the image, to provide the impression of “margin” around it in the right <div>:

div#rightcol:before {
	content: " ";
	float: left;
	width: 25%;
	padding-top: 102%;
}

This pushes a placeholder into the second <div>, which the image can then occupy.

The one major disadvantage of this technique is that it cannot be used with CSS "newspaper style" columns, although the CSS Exclusions module will offer some solutions, once browsers support the specification. Another limitation is the fact that the image must be at the top of the <div>; you cannot, unfortunately, place the illustration in an arbitrary vertical location.

I’ve made this solution responsive, such that the text collapses into a single column when the viewport is narrow enough.

Photograph by Christopher Chan, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/qEBYxM