是否可以使用 CSS 使文本在图像周围一直浮动？

Question

使用float: left 或right 让文本围绕图像流动很简单，但是是否可以让文本围绕放置在文本中心的图像流动？我想我真正想要的是float: center 或float: left 10% - 但当然不存在！

我尝试过使用 display: inline-block 但这似乎不起作用（或者我不明白），因为图像实际上被视为字符，并且图像高度比行高，文字有不美观的空隙。

这里有一些代码来说明我想要做什么。如果您尝试一下，您会发现图像比行高大得多（这就是我想要的）。

    <p>Quisque laoreet sed erat at lobortis. Phasellus eu dolor id neque cursus egestas. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus sollicitudin consectetur nulla vitae ultrices? Pellentesque eget nisl et nunc faucibus maximus ac sit amet sapien. Etiam suscipit, eros vel porta consectetur, elit odio mattis lectus, vel fermentum urna eros eu nulla. Phasellus posuere, ipsum et efficitur aliquam, dolor erat posuere dui, et sollicitudin risus ante at augue. 
        <svg class="icon" style="align: center; float:none; display: inline-block;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" >
            <path  d="M31.722 26.305h-9.23c-0.479 0-0.861-0.385-0.861-0.859 0-0.477 0.383-0.861 0.861-0.861h8.368v-8.371c0-0.474 0.385-0.859 0.861-0.859 0.472 0 0.859 0.385 0.859 0.859v9.232c0 0.474-0.387 0.859-0.859 0.859z"></path>
            <path  d="M23.351 32.317h23.408v-15.241h-14.683l-8.725 8.727v6.514zM47.618 34.040h-25.126c-0.479 0-0.861-0.387-0.861-0.861v-7.732c0-0.23 0.092-0.448 0.251-0.61l9.23-9.227c0.162-0.162 0.38-0.254 0.61-0.254h15.896c0.477 0 0.861 0.385 0.861 0.859v16.964c0 0.474-0.385 0.861-0.861 0.861z"></path>
            <path  d="M23.351 52.3h23.408v-6.784h-23.408v6.784zM47.618 54.020h-25.126c-0.479 0-0.861-0.385-0.861-0.861v-8.504c0-0.474 0.383-0.861 0.861-0.861h25.126c0.477 0 0.861 0.387 0.861 0.861v8.504c0 0.477-0.385 0.861-0.861 0.861z"></path>
            <path  d="M55.254 51.051h-5.385v-3.441h1.941v-12.488h-33.518v12.488h1.946v3.441h-5.387v-19.37h40.403v19.37z"></path>
            <path  d="M45.142 37.678c-1.12 0-2.023 0.908-2.023 2.026s0.904 2.026 2.023 2.026c1.12 0 2.026-0.908 2.026-2.026s-0.906-2.026-2.026-2.026z"></path>
            <path  d="M40.191 40.115h-10.577c-0.474 0-0.861-0.385-0.861-0.861 0-0.474 0.387-0.859 0.861-0.859h10.577c0.474 0 0.861 0.385 0.861 0.859 0 0.477-0.387 0.861-0.861 0.861z"></path>
        </svg>
        Etiam dignissim vehicula quam ut placerat. Maecenas commodo eros vel risus mattis fermentum. Duis sed sollicitudin nisi. Nam vulputate lectus eu pulvinar suscipit! Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sit amet nibh dictum, suscipit odio a, sagittis massa. Phasellus aliquam gravida orci quis sodales. Phasellus molestie blandit euismod. Phasellus orci justo, aliquet non maximus ac, accumsan vel arcu? Duis quam ligula; ultrices ac porta at, rhoncus bibendum nisl.</p>

Answer 1

您的问题非常模糊，但我希望这就是您的意思。 如果您必须...然后裁剪并调整图像大小或简单地使用 css 设置图像的高度，然后将图像像图标一样放在文本的中间。

<p>
The value for signature is computed by clicking the symbol <img id="symbol" src="image.jpg"/> the same way as with the handover request to your action URI.
</p>

#symbol{
  height: 18px;
  display: inline-block;
  vertical-align: bottom;
}