html - 将文本与 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 文件中，您可以为段落标记使用 float :

#mapsInstructionOne {
    float: right;
}

根据您希望文本换行的方式，您也可以选择 float 对象标签。在这种情况下 -

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

注意:这些示例删除了段落标签，使其不再是对象标签的子标签。