将文本与 svg 图像对齐

Question

How can I put the next next to the svg object.

the result I get is :

The result I want is adding the text next to the svg image:

Here is the 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

You can achieve this with CSS and with a change in the markup:

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>

And then in your CSS file, you can use a float for the paragraph tag:

#mapsInstructionOne {
    float: right;
}

Depending on how you want the text to wrap, you could also choose to float the object tag instead. In this case -

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

Note: These examples remove the paragraph tag from being a child of the object tag.