Estoy creando un sitio de marcador de posición muy básico. Centrado, en el medio de la página, debe leer:

(LOGOTIPO DE LA COMPAÑÍA) EL SITIO WEB PRÓXIMAMENTE EN 2018

El logotipo de la empresa utiliza la misma fuente que el texto.

De forma predeterminada, la imagen se encuentra muy bien junto al texto, sin embargo, esto cambia cuando intento alinearla centralmente.

body {
  background-color: #fff;
  background-size: cover;
  text-align: center;
}

img {
  float: left;
  width: 350px;
}

h1 {
  position: relative;
  top: 18px;
  left: 10px;
}
<body>
  <div class="header">
    <img src="http://via.placeholder.com/350x100" alt="logo" />
    <h1>WEBSITE COMING IN 2018</h1>
  </div>
</body>

¿Cuál sería la forma más eficaz de hacer esto?

0
Sam Johnson 13 nov. 2017 a las 17:39

2 respuestas

La mejor respuesta

Puedes abordar esto usando flexbox

body {
  background-color: #fff;
  background-size: cover;
  /* added */
  margin: 0;
  height: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  display: flex;
  text-align: center;
  align-items: center;
}
<body>
  <div class="header">
    <img src="http://via.placeholder.com/350x100" alt="logo" />
    <h1>WEBSITE COMING IN 2018</h1>
  </div>
</body>
1
sol 13 nov. 2017 a las 14:42

Puede usar display: flex; de la siguiente manera en su elemento .header

body {
  background-color: #fff;
}

img {
  width: 200px;
}

h1 {
  margin-left: 10px;
  line-height: 100%;
}

.header {
  display: flex;
  justify-content: center;
}
<body>
  <div class="header">
    <img src="http://via.placeholder.com/350x100" alt="logo" />
    <h1>Website Coming in 2018</h1>
  </div>
</body>

Nota: el ligero desplazamiento vertical del texto se debe al espacio debajo de su línea de base, que está reservado para letras como j, g, p, etc., que se extienden por debajo de la línea de base. Tan pronto como use cualquiera de estas letras en su texto, estará perfectamente centrado. Cambié las letras mayúsculas al modo de texto normal para demostrar esto.

0
Johannes 13 nov. 2017 a las 14:46