html - 图像的 CSS 对齐问题

Question

看看这张图片:

http://i.gyazo.com/a5bf5097e6783d4879f12fdba0b2bbec.png

我想获得配置文件下方的“测试”，BR html 标记会产生上述结果，但我不希望这样。

这是我的代码: http://pastebin.com/raw.php?i=hW3jDrLu

<i class="fa fa-user fa-3x" style="vertical-align:middle;"></i>
<span style="font-size: 12pt;">Profile <span style="color: #979797;font-size:8pt;">Test</span></span>

我希望“测试”位于配置文件标题的正下方

Answer 1

如果没有看到您的更多代码，很难说，但我想您最好的选择是将 img 放在一个 div 中，将文本放在另一个中。然后，您可以在其 div 中的文本中换行，并且 div 仍然位于 img 的右侧。

Here是它应该如何工作的模型。

显然我也必须在这里添加 fiddle 代码:

HTML:

<div class="imgC"><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42"> </img></div>
<div class="textC"><span style="font-size: 12pt;">Profile <br></span><span style="color: #979797;font-size:8pt;">Test</span></div>

CSS:

.imgC{
    display:inline-block;
    float:left;
}

.textC{
  display:inline-block;
    float:left;    
}