Question

我试图让我的图像漂浮在div的中心。代码目前：

<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>

问题是图像是钻石，我希望文本用缩进包裹钻石。我相信这是<img align='center' />的可能性，但在HTML 4.01中已弃用，HTML 5中甚至不支持。

我尝试了几种可能性，但我仍然无法正确地将文字包裹在钻石周围。

Answer 1

有关选项，请参阅此处。我有两个选项，CSS-Shapes和SVG。

当前最佳选择是使用SVG图片，但请确保使用SVG代码，而不是将其作为图片关联。

这是一个JSFIDDLE，您可以看到该文字能够突出显示并可以进行编辑。（更多的痛苦要编辑，所以在保存之前尽量使用AI中的文本，但仍然可以编辑）

这也非常灵活，您可以在此FIDDLE中看到。

这是一项非常新的功能，但尚未获得良好的浏览器支持。

SO CSS-Shapes

一旦这个，

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

支持您可以轻松完成此任务。

我建议学习基础知识，所以一旦大多数当前浏览器都支持你，你就会知道该怎么做。

Answer 2

你只能用一张图片来做这件事。但您可以使用形状，请查看此页面：

https://www.makeuseof.com/tag/csstextwrap/

使用CSSTextWrapper，您可以轻松地为任何人生成HTML文本换行可以想象的形状。它可以是圆形，之字形，三角形或其他你要。快速且简单易用，只需加载徽标（可选）即可提供的仪表板和拖动边线以定义文本换行。

相当令人印象深刻。

Answer 3

我设法找到了解决此问题的手动方法。图像保留在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>

然后我确保所有这三个浮动：#navig div {float:left;}并且两个空div正在使用text-align。第一个将对齐，最后一个对齐。

然后用<ul>填充两个空div，并将我想要的菜单填入<li>标签。对于示例，我将使用一些基本菜单项。

<div id="navig">
        <div id="nav1">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </div>
        <div id="nav2">
            <img src="images/logo.png" height="333" />
        </div>
        <div id="nav3">
            <ul>
                <li>Products</li>
                <li>Shipping</li>
                <li>Legal</li>
            </ul>
        </div>
    </div>

然后我添加了#nav1 ul li:nth-child(1)并定位了第一个元素，它对抗钻石是“Home”。我可以将“Home”更改为我喜欢的任何内容，并且位置保持为text-align: right。使用您正在使用的许多<li>项目添加这些项目并进行编辑以满足您的需求。例如：

#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;
}

这将我的第一件，第二件和第三件物品推到了钻石上，但是带了一点衬垫，以免闯入。

有点漫长的过程，但充足的自由，给了我预期的效果！

CSS在图像上换行文本

3 个答案: