Quizás les parezca algo demasiado básico o estúpido, pero llevo varias horas dándole vueltas y no logro hacerlo, si alguien me hecha una mano, bienvenido sea. Gracias de antemano!
header{
align-items : center;
background : red;
display : flex;
height : 25vh;
justify-content: center;
text-align : center;
width : 100%;
}
.logo{
-moz-border-radius :100px;
-webkit-border-radius:100px;
background : purple;
border-radius :100px;
height : 20vh;
width : 30vh;
display: flex;
align-items: center;
justify-content: center;
}
.titulo{
font-size: 5vh;
}
.sub-titulo{
font-size: 3vh;
}
<!DOCTYPE html>
<html lang="es">
<head>
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<link rel="stylesheet" href="css/header.css">
<meta charset="UTF-8">
</head>
<body>
<header>
<div class="logo">
<div class="titulo">TITULO</div>
<div class="sub-titulo">SUBTITULO</div>
</div>
</header>
</body>
</html>
Lo que pretendo es poner el div, "subtitulo" debajo del "Titulo" y a la vez, que estos permanezcan centrados en "logo"
flex-direction:column
pero es complicarse demasiado ya que losdiv
por defecto son elementos de bloque y se ponen uno debajo de otro y simplemente añadiendo untext-align:center
centras el texto<h1 class="logo>TITULO<br><small>SUBTITULO</small></h1>
y en el CSS:.logo{text-align:center;}