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!