Question

你好我一直在尝试创建一个横幅，其标题和图像在div框中水平和垂直居中。当没有图像时它正常工作，但是当我放置图像时，图像保持正确居中，而标题变得不正确，如片段所示。我不知道如何解决这个问题。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  border: 3px solid red;
}

header {
  background-color: #595959;
  color: #fff;
  display: flex;
  min-height: 300px;
}

#banner {
  margin: auto;
}

#banner h1 {
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="test.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>
  <header>
    <div id="banner">
      <h1>Test</h1>
      <img src="http://www.html5gamedevs.com/uploads/monthly_2017_08/image.jpg.31a662f3a122c7509c42474ce5346aeb.jpg" alt="Logo">
    </div>
  </header>
</body>

＆＃13;

Answer 1

只需将display：flex和align-items：center添加到#banner

即可

这

#banner{
margin: auto;
}

到

#banner {
    margin: auto;
    display: flex;
    align-items: center;
}

Answer 2

这样，如果您知道图像大小，则可以编辑H1属性。

* {
margin:0;
padding:0;
box-sizing: border-box;
}
    
body{
padding: 0;
margin: 0;
border: 3px solid red;
}
header{
background-color: #595959;
color: #fff;
display: flex;
min-height: 300px;
}
#banner{
margin: auto;
}
#banner h1{
display: block;
height: 100px;
line-height: 100px;
float: left;
}

<!DOCTYPE html>

<head>
	<link rel="stylesheet" type="text/css" href="test.css">
	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
	<header>
		<div id="banner">
			<h1>Test</h1>
			<img src="http://www.html5gamedevs.com/uploads/monthly_2017_08/image.jpg.31a662f3a122c7509c42474ce5346aeb.jpg" alt="Logo">
		</div>
	</header>

CSS - 居中图像和标题

2 个答案: