Question

所以我有一个学校项目。我必须建立自己的网站。我有一个问题：我无法沿左右两个图像垂直对齐h1。

将其嵌入div并使用vertical-align: middle;无济于事。即使有一个前缀黑客，我发现here

这是我网站项目的源代码：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>The dankest website on earth</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="CSS/CSS.css">
    </head>
    <body>
        <div id="header">
            <img class="DebugBorder" src="images/lenny.png" title="memes.wav" style="float: right;" width="200px" height="200px" />
            <img class="DebugBorder" src="images/lenny.png" title="memes.wav" style="float: left" width="200px" height="200px" />
            <h1 class="DebugBorder">Sample text</h1>
        </div>        
    </body>
</html>

CSS

.DebugBorder{ border: 2px red solid}

body {background:linear-gradient(to bottom, darkred, black);background-repeat: no-repeat;}

html {height: 100%;}

h1 {text-align: center; font-size: 4em; font-family: impact; width: 50%; margin: auto; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white;}

#header {height: 200px}

我删除了任何无效的解决方案，并将其保持在最低限度。

Answer 1

如果您希望文本在图像之间垂直居中，则表格显示可以正常工作。

您的CSS更改看起来像

#header {
    height: 200px;
    display:table;
}
.DebugBorder{ 
    border: 2px red solid; 
    display:table-cell;
    width:29%;
}

以下是使用您的代码的小提琴：https://jsfiddle.net/dy4nycjk/1/

但是如果你想让文本垂直居中并覆盖图像，你将需要做更多的定位工作。这是另一个小提琴，以两个图像为中心的文本示例：https://jsfiddle.net/ktLn72yq/

Answer 2

如果您的H1标题只有一行，那么您可以设置它的行高以匹配图像的高度。所以在这种情况下：

.DebugBorder { 
    border: 2px red solid;
    line-height:200px;
}

这应该将H1与图像的中间对齐。

编辑：或者将行高应用于H1元素而不是调试类，就像我刚刚意识到的那样。：）

不能垂直对齐H1（前缀黑客不工作）

2 个答案: