Html CSS在图像上包装文本

我正在尝试让我的图像浮动在分区的中心。当前代码：

<style type="text/css">
    #navig {
        height: 333px;
    }

    #navig img {
        display: block;
        margin: 0px auto;
    }
</style>
<div id="navig"><img src="images/logo.png" height="333" id="logo" /></div>

#纳维{
高度：333px；
}
#导航图像{
显示：块；
保证金：0px自动；
}

问题是图像是一个钻石，我想文字环绕钻石与缩进。我相信这在

中是可能的，但这在HTML4.01中被弃用，甚至在HTML5中都不受支持

---

我已经尝试了几种可能性，但仍然无法使文本正确地环绕在菱形周围。

仅凭图像是无法做到的。 但您可以使用形状，请查看此页面：

使用CSSTextWrapper，您可以轻松地为任何 可想象的形状。它可以是圆、之字形、三角形或其他形状 你想要的。使用方便快捷，只需加载徽标（可选） 提供的仪表板和拖动边线可定义文字换行

---

非常令人印象深刻。

有关一些选项，请参阅此。我有两个选项，

CSS形状

和

SVG

当前最好的选择是使用

SVG

图像，但要确保使用

SVG

代码，不要将其链接为图像

下面是一个示例，正如您所看到的，文本可以高亮显示，并且可以编辑。（编辑更痛苦，所以在保存之前请尽量使用AI中的文本，但仍然可以编辑）

这也是非常灵活的，你可以在这里看到

这是一个非常新的功能，还没有很好的浏览器支持

一旦这个,

shape-outside: polygon(50px 0px, 100px 100px, 0px 100px);

如果受支持，您将能够轻松完成此操作

---

我建议您学习基础知识，这样一旦大多数当前浏览器支持它，您就已经知道该怎么做了。

我设法找到了一种手动解决方法。图像保留在div中，并由另外两个闭合的div标记包围

<div id="navig">
    <div id="nav1"></div>
    <div id="nav2"><img src="images/logo.png" height="333" id="logo" /></div>
    <div id="nav3"></div>
</div>

然后，我添加了

#nav1 ul li:nth child（1）

，并定位了第一个元素，它将是钻石的“家”。我可以将“Home”更改为我喜欢的任何位置，并且该位置保持为强制

text align:right

。将这些添加到您正在使用的

项目中，并根据您的需要对其进行编辑。例如：

#nav1 ul li:nth-child(1) {
    position: relative;
    left: 48px;
}

#nav1 ul li:nth-child(2) {
    position: relative;
    left: 24px;
}

#nav1 ul li:nth-child(3) {
    position: relative;
    left: 8px;
}

这把我的第一、第二和第三件物品推到了钻石上，但为了不打扰我，我加了一点填充物

---

这是一个有点漫长的过程，但有足够的自由，给了我想要的效果

你想让文字包在钻石里面，对吗？就像它的父级边缘齐平一样？我想将文本几乎齐平地包装到菱形的外侧。几乎就像是一个不能包含文本的掩码。的副本肯定会在将来的项目中记住这一点。@user2195574请参阅“我的答案编辑”，这是最好的选项。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能会无效。@DonaldDuck非常好，特别是考虑到链接已不再有效：）我将查找此信息并编辑答案。

#nav1 ul li:nth-child(1) {
    position: relative;
    left: 48px;
}

#nav1 ul li:nth-child(2) {
    position: relative;
    left: 24px;
}

#nav1 ul li:nth-child(3) {
    position: relative;
    left: 8px;
}