我正在使用CSS3的多列布局功能，但是很难找到一种方法来水平居中div，这样文本就可以环绕它。任何帮助都会很棒的，谢谢！
Here's an idea of what I'm trying to do.
最佳答案
我不确定你想要什么，但也许这能帮到你？这里是fiddle
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
.yourPic{
border:3px solid black;
height:60px;
margin-top:50%;
}
</style>
</head>
<body>
<p><b>Note:</b>Internet Explorer 9, and earlier versions, does not support the column-rule-width property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
<div class="yourPic">
picture
</div>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer
possim assum.
</div>
</body>
</html>
编辑另一种可能性，使其与表兼容。（我更喜欢这个解决方案）
这里有一个fiddle