將文本與 svg 圖像對齊

Question

如何將 next 放在 svg 對象旁邊。

我得到的結果是：

我想要的結果是在 svg 圖像旁邊添加文本：

這是 HTML：

<div class="alert alert-success smallFont" id="instruction">
<object data="images/information.svg" type="image/svg+xml" id="object">
<p id="mapsInstructionOne" class="mapsInstructionOne" align="center"></p>   
</object>
</div>

Answer 1

您可以使用 CSS 並更改標記來實現此目的：

HTML：

<div class="alert alert-success smallFont" id="instruction">
<p id="mapsInstructionOne" class="mapsInstructionOne" align="center"></p> 
<object data="images/information.svg" type="image/svg+xml" id="object"></object>     
</div>

然后在您的 CSS 文件中，您可以為段落標記使用浮點數：

#mapsInstructionOne {
    float: right;
}

根據您希望文本如何換行，您還可以選擇浮動對象標簽。 在這種情況下 -

HTML：

<div class="alert alert-success smallFont" id="instruction">
<object data="images/information.svg" type="image/svg+xml" id="object"></object>
<p id="mapsInstructionOne" class="mapsInstructionOne" align="center"></p> 
</div>

CSS：

#object {
    float: left;
}

注意：這些示例將段落標記從對象標記的子項中刪除。