Question

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

Here's a fiddle.

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

Fiddle Here

Answer 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;
}

Answer 3

您可以使用绝对定位 Fiddle here

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

无法对齐图片旁边的文字

3 个答案: