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

您可以使用line-height：

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>

Answer 2

你可以使用类似的东西：

img {
  left: 50%;
  margin-left: -20px; /* This should be the half of your img with */
  position: absolute;
}

顺便说一下，不是最好将rel标记整合到标题中。您应该将其移至head。但是你真正想要达到的目标还不是很清楚？

我需要在标题上对齐图像，文本

2 个答案: