Hola, he estado tratando de crear un banner, donde el encabezado y la imagen se centran horizontal y verticalmente en su cuadro div. Funciona normalmente cuando no hay imagen, sin embargo, cuando coloco una imagen, la imagen permanece correctamente centrada mientras que el encabezado se sale de posición como se muestra en el fragmento. No estoy seguro de cómo resolver esto.

* {
  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;
}
<!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>
0
user7808079 12 nov. 2017 a las 00:21

2 respuestas

La mejor respuesta

Simplemente agregue display: flex y align-items: center a su #banner

De

#banner{
margin: auto;
}

Para

#banner {
    margin: auto;
    display: flex;
    align-items: center;
}
2
K. Bert 11 nov. 2017 a las 21:25

De esta forma, si conoce el tamaño de la imagen, puede editar las propiedades 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>
1
Nick 11 nov. 2017 a las 21:27