同一行上的文字和图像

Question

我有徽标和标题图片。当我尝试将标题图像居中时，它似乎转到下一行。如何将它保持在同一行？

Website

由于

Answer 1

试试这个：http://jsfiddle.net/CZ86G/1/

您的图片都是内联元素。所以只需删除div并垂直对齐两个图像：

img {
    vertical-align: middle;
}

删除unessessary代码的组合应该足够了。

Answer 2

div是一个块元素，它会使它出现在新行上。

    <div align="center">
<img width="500" height="auto" src="img/text.fw.png" alt="RCC">
</div>

删除div并使用margin设置图像，或使用position：absolute使其显示在上面徽标顶部的图层中。

<div align="center" style="position:absolute;top:40px;width:100%;text-align:center">
<img width="500" height="auto" src="img/text.fw.png" alt="RCC">
</div>

（仅用于演示的内联样式）

您还可以给div一个负边距顶部来分散页面。

另一种方法是将徽章作为div的背景图像，并将文本放在顶部......许多可能的解决方案。