如何将 <img> 与 CSS 垂直居中并且不与文本重叠？

Question

我想在我的论坛中放置一个标志，但我使用的引擎和模板都不支持这个。所以我决定试一试并放上去。这看起来很简单，但事实并非如此。

我已经尝试了至少 5 种我在网上找到的方法（主要来自 Whosebug），但它们要么根本不起作用（图像未垂直居中），要么只能部分解决问题，因为图像与文本重叠关注它。

在 vertical-centering 方面有效的唯一解决方案是基于 position: absolute 和 margin: auto

<img src="/EL3232.png" width="32" height="32" style="
        float: left;
        position: absolute;
        top:0;
        bottom:0;
        margin:auto;
">

但是它有一个副作用：图像与论坛标题文本重叠。

HTML 我想说的是相当复杂，它对 post 的简化并不容易（每个前面的元素都有很多 CSS），所以我想我会只需将 link 传递到我的网站，这样您就知道我的意思了： http://www.forumextalife.pl/

基本上是这样的层次结构： <div> -> <nav> -> <div> -> <div> -> <a>。我想在这个 <a> 标签内放置一个包含徽标的 <img>。确切地说 - 网站中的元素是：<a class="navbar-brand">

希望大家能解决。我从没想过这会如此复杂，只需要一个垂直居中且不重叠文本的图像。

Answer 1

最简洁的方法可能是将图像设置为 .navbar-brand 的背景图像，并填充一些 and/or 行高，以便标题与其对齐。像这样...

.navbar-brand {
   background:url(/EL3232.png) left center no-repeat;
   display:inline-block;
   padding-left:40px;
   height:32px;
   line-height:32px;
}

不过请牢记响应式设计 - 我看到您的标题在移动设备上的尺寸已经受到限制。

如何将 <img> 与 CSS 垂直居中并且不与文本重叠？

How to vertically center an <img> with CSS and NOT overlap a text?

html

css

image

vertical-alignment

overlapping