文本和图像在同一行

我有一个标志和标题图像。当我尝试将标题图像居中时，它似乎进入下一行。我如何保持它在同一行？文本和图像在同一行

Website

由于

来源

2014-06-28 Arjun Naha

使用适用于徽标图像的“float：right”并在标头之前放置其标签。 Rgds， –

@AlexBell你可以解释一点点（或者发送一个jsFiddle！）。谢谢 –

请把你的原始代码放在jsFiddle中，然后我会看看它。 Rgds， –

在div是块元素，这会导致它出现在一个新行。

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

要么除去div和图像与边际位置，或使用位置：绝对使其显示在上面的标志的顶部上的层。

<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的背景图像，并将文本置于顶部....提供许多可能的解决方案。

来源

2014-06-28 14:18:53

我将如何定位图像的边距（你能告诉我（我是一个n00b）） –

它建立在基金会，我需要保持它的抵抗力！ –

喜欢这个 - http://jsfiddle.net/CjHg2/ –

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

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

img { 
    vertical-align: middle; 
}

这个组合的移除代码和这个就足够了。

来源

2014-06-28 14:24:59 hurrtz

这是要走的路！ –

他想让它集中对齐，而不是垂直对齐，我想（可能是左边的徽章）。内嵌块元素不能像这样集中对齐。 –

文本和图像在同一行

回答

相关问题