CSS环绕居中图片文字

Question

如何将文本环绕在像这样居中（圆形）的图像周围：

我尝试了这个 jsfiddle，但文字会出现在图片后面，而不是环绕它。

#circle {
 float:positioned;
 position: absolute;
 top:10%;
 left: 40%;
 wrap-shape: circle(50%, 50%, 120px);
 wrap-margin: 10px;
        }

<div id="circle"><img src="http://www.guitare-rabuffetti.fr/test/circle.png"/></div> 

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.
Mauris vel lacus vitae felis vestibulum volutpat. Etiam est nunc, venenatis in, tristique eu, imperdiet ac, nisl. Cum sociis natoque penatibus et 
</div>

- Maxtor

---

float:positioned; 不是有效的浮点数。 - cli

http://jsfiddle.net/5Lxc444p/1/ 这可能是一个开始，但它并不完美。它在Firefox中无法工作，但在Chrome中可以。 - cli

谢谢您的回复！但我正在寻找一张居中的图片，“shape-outside”只能与“float”一起使用。因此，我尝试使用“position:absolute”的“wrap-shape”来使图像居中 - 但文本无法围绕圆形流动（wrap-shape不起作用）。 - Maxtor

这可能会有所帮助：http://www.html5rocks.com/en/tutorials/shapes/getting-started/ - Topological Sort

Answer 1

正如已经指出的那样，形状环绕目前仅适用于浮动元素，因此仅使用CSS无法实现这种精确情况，因为只允许在形状的一侧进行环绕（预期）。一旦CSS Shapes 2和/或CSS Exclusions规范被采用，我们将能够不仅使用形状，还能使用图像透明度来实现这一点。

我在尝试解决形状和CSS列相互作用的问题时遇到了同样的问题（剧透：效果还不错，但不是自然的）。问题似乎在于布局算法查找最远的边缘（忽略多个边缘的可能性），然后从该坐标开始内容布局。对于中间的元素，这意味着您只在一侧得到文本。对于CSS列（这就是我发现这一点的方式），布局再次从最远的边缘开始，但然后直接向下延续，而不是在每行上包裹形状（参见fiddle），因此形状上的突出部分（如星形

- brichins

Answer 2

问题解决：

实际情况： CSS形状适用于浮动，因此目前不适用于居中图片。该属性目前仅适用于Chrome和Opera。也许将来会有非浮动元素的解决方案。请查看W3C编辑器草案：http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

手工CSS解决方案： 基本上，有两列（就像报纸一样）。文本从左列开始并向下延伸。文本继续在右列的顶部向下延伸。两列比图像高一点。左列和右列都有半透明圆圈 - 位于居中图像的位置。两个半圆由多个不同长度的框构建，它们是不可见的。（框的高度是字体的高度。）文本必须对齐。现在，文本在每个列中围绕半圆流动。图像将放置在2个不可见的半圆上方。

另一个不太技术性的解决方案是使用Libre Office和Inkscape来制作SVG文件。将图片导入Libre Office，让文字环绕在图像周围，保存为PDF格式，打开Inkscape，保存为SVG格式，将SVG导入您的网页中，完成。感谢大家的帮助和意见！

- Maxtor

Answer 3

我认为这是不可能的，因为它依赖于float，而你不能将其浮动到页面的中间/居中。

这是我想出来的： [旧版fiddle]/5Lxc444p/8/

如果你在实际圆形上放置width样式，它比在父级div上更好地工作。

此外，这里有一个关于CSS形状的好文章：http://www.html5rocks.com/en/tutorials/shapes/getting-started/

编辑：

这里是一个更新的fiddle，用绝对定位的圆形进行2列布局。 http://jsfiddle.net/5Lxc444p/11/

- Jason

---

谢谢你的帮助！我明白，“shape-”与“float”有关。因此，我尝试了“wrap-”（但没有结果）。我将寻找一个基于SVG的解决方案或者一个基于CSS的手工制作的双列方案。 - Maxtor

我添加了一个带有两列布局的小例子。干杯！ - Jason

如果您想标记为已回答，那就太好了:D - Jason

感谢您的努力和双列小提琴！如果您看我的帖子上的小图片，您会看到圆圈后面的文本而不是（隐形的）矩形结构。如果您希望我将问题标记为已回答 - 对我来说没问题，我会尽快处理。 - Maxtor