html - 我需要对齐标题上的图像和文本

Question

我正在尝试将标题中心的图像和文本对齐，一个显示在左侧，另一个显示在右侧。虽然我无法让文本居中。

header{
    height: 7em;
    background-color: gray;
}
header h1{
    vertical-align: middle;
    float: right;
}
header img{
    height: 7em;
    width: 12em;
    vertical-align: middle;
    float: left;
}

<header>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <img src="img/filmes.png" alt="logo"/>
        <h1>Sua Locadora Virtual!</h1>
    </header>

Answer 1

你可以使用行高:

header{
    height: 7em;
    background-color: gray;
}
header h1{
    vertical-align: middle;
    float: right;
    line-height: 2em;
}
header img{
    height: 7em;
    width: 12em;
    vertical-align: middle;
    float: left;
}

<header>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <img src="img/filmes.png" alt="logo"/>
        <h1>Sua Locadora Virtual!</h1>
    </header>