1

Estoy trabajando en un encabezado HTML y CSS en el que quiero centrar el título en todo el encabezado, en lugar de que se centre solo en el espacio sobrante después del botón. Mi código actual se ve así:

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dee1e6;
  height: 7%;
  font-size: 21px;
}

#boton {
  margin-left: 10px;
}

.titulo {
  margin: 0 auto;
}
<div class="header">
  <div id="boton">Botón</div>
  <div class="titulo">Encabezado</div>
</div>

¿Cómo puedo lograr que el título se centre en todo el encabezado (es decir, en el total de la caja .header)?

¡De antemano muchas gracias por la ayuda!

1 respuesta 1

1

Por defecto, los elementos ocupan un espacio que no puede ser ocupado por otros elementos, pero podemos alterar dicho comportamiento.

En tu caso, necesitarías que el botón no ocupase ese espacio por defecto, para que de esa manera el título pudiese ocupar el 100% del ancho del padre, quedando de esta manera centrado respecto a este.

Para ello he usado position: relative para el header y position: absolute para el botón.

La regla position: absolute saca del flujo normal de la página al elemento, y su posicionamiento pasa a ser relativo al primer ancestro con posicionamiento relativo que encuentre (por eso el darle dicho posicionamiento al header, para que aunque no ocupe espacio si que queda encuadrado dentro de los límites que permite el header).

Lo único que tendrías que controlar es que es que el título no acabe pisando al botón cuando el layout se reduce a cierto tamaño de dispositivo. Para ello puedes servirte de un @media para hacer la fuente del título más pequeña o algún arreglo similar.

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dee1e6;
  height: 7%;
  font-size: 21px;
  position: relative;
}

#boton {
  margin-left: 10px;
  position: absolute;
  left: 0px;
}

.titulo {
  margin: 0 auto;
}
<div class="header">
  <div id="boton">Botón</div>
  <div class="titulo">Encabezado</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.