Question

我正在使用bombax wordpress主题。由于当我使用图像作为标题时没有显示描述，我决定调整html / css以在标题的中间显示网站标语。

这是我想要居中的图像（左边没有重叠的徽标，带有网站名称的树叶）： http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png

这是原始主题html：

<div id="headerwrap">
    <div class="clear"></div>
    <a href="http://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);">
       <img src="http://www.noticiasnaturais.com/wp-includes/images/logoHeader.png" alt="Notícias Naturais" title="Notícias Naturais">
    </a>
 </div>

然后我尝试更改如下，在href周围添加adiv以将其浮动到左侧，添加外部div以向右浮动（填充最右边的空间），以及第三个div在中间对齐。

<div id="headerwrap">
    <div class="clear"></div>
    <div style="float:left"><a href="http://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);">
   <img src="http://www.noticiasnaturais.com/wp-includes/images/imagefile" alt="Notícias Naturais" title="Notícias Naturais">
    </a></div>
   <div style="float:left;height: 100%";align=center><img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png">
   </div>
</div>

编辑：只是澄清问题，我需要带有文字的图像位于徽标的右侧。此时我直接将它放在背景图像上，但这并不适用于所有屏幕分辨率。没有任何建议（到目前为止）可以做到正确。

Answer 1

我不是100％肯定你在问什么，但我认为你需要做的是：

   <div style="float:left;height: 100%; margin-left:auto; margin-right:auto;">

这应该使图像居中。

Answer 2

当您从float: left移除div并添加clear: both; text-align: center时，它会覆盖整个宽度并保持在树叶图像下方。然后你有居中的图像

<div style="clear: both; height: 100%; text-align: center">
    <img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png">
</div>

JSFiddle

请注意，align属性已弃用。

更新

当您希望文字图片保持在同一条线上时，您必须为div提供最小宽度，并像以前一样使用text-align: center

HTML

<div id="middle">
    <img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png">
</div>

CSS

#middle {
    min-width: 800px;
    text-align: center;
}

JSFiddle

如何使用css在中间对齐此标题

2 个答案: