无法对齐图片旁边的文字答案

【问题标题】：Can't align text next to image无法对齐图片旁边的文字
【发布时间】：2015-10-17 01:24:02
【问题描述】：

我有以下代码，但我无法让 header-loggedout div 中的文本在边框内居中显示。如果我调整 div 的高度、垂直边距或填充，由于某种原因，它总是最终会移动底部边框 down。图像和文本无法正确对齐。如何将文本和图像保持在（至少大致）相同的位置，但垂直对齐 both 到顶部/底部边框之间的中间？

Here's a fiddle.

.header-lower {
  position: relative;
  display: table;
  z-index: 0;
  padding: 10px 0px;
  width: 100%;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.header-logo {
  display: table-cell;
  text-align: left;
  margin: 0 0 20px;
  vertical-align: inherit !important;
}
.header-logo a {
  display: inline-block;
  float: left;
  max-width: 100%;
  line-height: 0;
}
.header-loggedout {
  font-size: 26px;
  vertical-align: middle;
}

<div class="header-lower">
  <div class="header-logo">
    <a href="#">
      <img title="" alt="alt" src="http://placehold.it/310x39" />
    </a>
  </div>
  <div class="header-loggedout">
    Test Text
  </div>
</div>

【问题讨论】：

@LaljiTadhani 它已经存在，直接在代码上方。
所有东西都必须在一个 div 中吗？如果您可以直接垂直对齐图像，这可能会更容易。

标签： html css

【解决方案1】：

您可以将.header-loggedout的显示设置为table-cell：

.header-loggedout {
    font-size: 26px;
    vertical-align: middle;
    display: table-cell;
}

Fiddle Here

【讨论】：

【解决方案2】：

替换这个类

.header-lower {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    display: table;
    padding: 10px 0;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    z-index: 0;
}

【讨论】：

您能否解释一下为什么您提议的 CSS 会起作用，而不仅仅是给出 CSS？

【解决方案3】：

您可以使用绝对定位 Fiddle here

   .header-loggedout {
      font-size: 26px;
      position:absolute;
      top:50%;
      right: 20px;
      transform: translateY(-50%);
   }

【讨论】：