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设置图像的高度，然后将图像放在文本的中间，就像一个icone。

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

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

1 个答案: