一行上的文本图像文本的Html结构

Question

我不知道我必须为此编写什么是html标签结构：

这是我的尝试：

<p class="servicio_recogida"><span class="servicio_recogida">Servicio de <span class="rojo">recogida</span><span>/</span><span class="rojo">entrega</span> gratis</span></p>
<img src="images/tfno_cabecera.png">
<p><span class="tfno">91 457 04 67 / 91 457 85 20</span></p>

Answer 1

这个例子怎么样（仅使用html＆amp; css）：

（参见此jsFiddle样本）

HTML：

<div class="cont">
    <div class="center">
        <span class="text">Servicio de recogida/entrega gratis</span>
        <img src="your/src.jpg" />
        <span class="num">91 457 04 67 / 91 457 85 20</span>
    </div>
</div>

的CSS：

.cont{width:100%;height:50px;background:orange url('your/bgimg.jpg') repeat-x;}
.cont .center{width:500px;margin:0 auto;position:relative;top:10px;text-align:center;color:#000;font-size:16px;}
.cont .center .text{display:inline-block;font-weight:bold;}
.cont .center img{display:inline-block;max-width:35px;max-height:35px;margin:0 10px;}
.cont .center .num{display:inline-block;font-size:18px;font-weight:bold;}

希望有所帮助。

Answer 2

这就是我使用的。

<div style="text-align:center;">
   Text on <span style="color:#FF0000">the left</span>
   <img src="image.png" width="32px" height="32px" alt="" style="vertical-align:middle;" />
   Text on <strong>the right</strong>
</div>

JSFiddle代码在这里

Answer 3

不，不，不！你们这些人不是HTML5 ...... * tut * tut ......无论如何你需要这样做：

<p>Lorem ipsum... <img src="images/example.png"> Lorem Ipsum...</p>

Yup那么简单，并没有告诉我格式错误，因为我到处都看到它......