将图像放在文本前面

Question

我有一个带有HTML代码的标题：

<div id="site-title">
  <a rel="home" > book Journey</a>
</div>

不，我想在这本书的旅途中插入一张小图片，我该怎么办呢。

Answer 1

您可以使用<span>内嵌元素来处理文本和图像

<强> HTML

<div id="site-title">
  <a rel="home" ><img src="imageurl"/><span>book Journey</span></a>
</div>

<强> CSS

img,span{
    vertical-align:middle;
}

Fiddle

Answer 2

为什么不为链接使用Image标记。

<a href="url"><img src="/path_to_img"/><span>book journey</span></a>

Answer 3

试试这个：

<div id="site-title">
   <a rel="home" > 
     <img style="float:left;" src="path-of-your-image/image.jpg" />
     book Journey
   </a>
</div>

Answer 4

以下是您要求的答案，

http://jsfiddle.net/Manjuboyz/vJS4m/133/

<div id="first"> 
 <div id="text"> Book Journey
</div>
<div id="img"><img src="~/Images/doctor-landing.png" style="height: 100%; width: 100%;" </div>
</div>

上面的CSS

#first{
height:35px;
width:150px;
border:1px solid brown;
 }

#text{
height:30px;
width:100px;
border:1px solid black;
float:left;
}

  #img{
height:30px;
width:30px;
margin-left:110px;
border:1px solid teal;
}

注意：

根据需要将图像更改为左侧或右侧

<强>更新

响应式屏幕