Question

我正在尝试this solution（第一个答案）将图像垂直对齐在具有以下额外css属性的div上，以便占用整个空间：

    position: absolute; 
    top: 0px; 
    bottom: 0px;
    left: 0px;
    right:0px;

问题是，即使使用原始问题（here）中引用的小提琴，如果您添加带有文字的附加范围（以<br/>分隔），此span显示在包含div之外。

我想将图像和标题对齐 div。

有什么想法吗？

HTML：

<html>
<head>
<title>Splash screen</title>
<style>
.frame {
    position: absolute; 
    top: 0px; 
    bottom: 0px;
    left: 0px;
    right:0px;
        text-align: center; 
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
img {
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
</style>
</head>
<body>
<div class="frame">
    <span class="helper"></span>
      <img class="center" src="img/splash/splash.png" />
      <br />
      HELLO WORLD
</div>
</body>

Answer 1

要使用<br />进行调整，您必须将height更改为min-height

updated fiddle

这是你的css：

frame {
    min-height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    text-align: center; margin: 1em 0;
}

此外，在您的示例小提琴中，类分配错误：

<div class=frame>

这是错误的

<div class="frame">
      /*___^_____^ see the quotes */

修改

在你的情况下......保持span inline并设置position:relative

span.helper { display: inline; height: 100%; vertical-align: middle; position: relative; }

wroking demo

编辑2

使用display:table来实现您的目的，而不是position。

注意 CSS表是IE8 =兼容!!

working fiddle

html, body { width:100%; height:100%; margin:0; padding:0; } .table { display:table; width:100%; height:100%; margin:0; padding:0; } .frame { display:table-cell; vertical-align:middle; border: 1px solid red; text-align: center; } .helper { display: inline; height: 100%; vertical-align: middle; position: relative; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; }

将图像与div中的标题垂直对齐

1 个答案: