0

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"

2
  • 3
    ¿Si quieres uno debajo de otro porque estás usando flex? Puedes hacerlo con flex-direction:column pero es complicarse demasiado ya que los div por defecto son elementos de bloque y se ponen uno debajo de otro y simplemente añadiendo un text-align:center centras el texto
    – user7176
    Commented el 12 abr. 2019 a las 6:31
  • Lo haría así: <h1 class="logo>TITULO<br><small>SUBTITULO</small></h1> y en el CSS: .logo{text-align:center;}
    – enxaneta
    Commented el 12 abr. 2019 a las 10:07

4 respuestas 4

1

Puedes darle un display contents a dichos elementos.

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;
}

.titulo, .sub-titulo {
display:contents;
}
<!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>

0

.logo-content{
width: 500px;
height: 500px;
display: flex;
flex-direction: column; /* los pondrá en columna, ubicando el texto debajo del otro*/
justify-content: center; /* ubica los texto en la mitad del cuadro */
align-items: center; /* los ubica en el centro del cuadro */
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Solid_pink.svg/1024px-Solid_pink.svg.png'); /* Le pongo un background image, esto para no escribir tanto codigo y sea más sencillo */
}
<div class='logo-content'>
<h1>Color rosado</h1>
<p>Un color bonito que al principio era color estrella del hombre</p>

<p>de aquí para abajo puedes ir escribiendo subtitulos, todos se irán ubicando debajo del otro</p>
</div>

-1

Lo que deseas hacer algo parecido a lo de la imagen

        .custom-logo-link {
            display: inline-block; 
            padding-right: 1em; 
            vertical-align: middle; 
            width: auto;
            }
        .wrap {
            margin-left: auto;
            margin-right: auto;
            max-width: 700px;
            padding-left: 2em;
            padding-right: 2em;
        }

        .site-title {
            clear: none;
            font-size: 24px;
            font-size: 1.5rem;
            font-weight: 800;
            line-height: 1.25;
            letter-spacing: 0.08em;
            margin: 0;
            padding: 0;
            text-transform: uppercase;
        }
        .site-description {
            color: #666;
            font-size: 13px;
            font-size: 0.8125rem;
            margin-bottom: 0;
        }
        .site-branding-text {
            display: inline-block;
            vertical-align: middle;
        }
 
<html>
<head>
    <meta charset="UTF-8">
    
</head>
<body>
    <div class="wrap">
            <a href="https://www.youtube.com/channel/UCUWfkfMunKQQEDIA1mH316Q" class="custom-logo-link"
               rel="home" itemprop="url"><img width="250" height="250"
                src="https://yt3.ggpht.com/a-/AAuE7mAGZ7RLFX-KfBSUqU2sqa8xW6MPVHZnwIvwyg=s288-mo-c-c0xffffffff-rj-k-no" 
                class="custom-logo" alt="Luly limon" itemprop="logo" 
                sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px"></a>
                <div class="site-branding-text">
                        <h1 class="site-title"><a rel="home">Luly 
                         limon</a</h1>
                         <p class="site-description">Juegos y Diversión</p>
                     </div>
    </div>

</body>
</html>

Si lo que que deseas como la imagen de arriba un logo con su texto centrado esto se puede lograr:

  • Conteniendo todo el código en un div en este tiene clase wrap dentro de ello el logo como enlace ya que el logo se utiliza para llevarte a la página de inicio dando click en el.
  • Dentro de clase wrap pondrias tambien el titulo con H1(en este caso es luly Limon) y el subtitulo con un p(en este caso juego y diversion).
  • De ahi los css de wrap te serviran al menos los tres primero( margin-left, margin-right,max-width) para centrar todo el div.
  • Para formatear el titulo usarías el css de site-title.
  • Para formatear el subtitulo usarías el css de site-description
  • y para que el logo y el texto quede centrado pues usarías los css de la clases site-branding-text y .custom-logo-lin.

Con eso lograrias el efecto que aparece al ejecutar el código, suerte espero te ayude :)

2
  • 1
    Hola Arles. Normalmente se explica que hace tu código. Esta bien que le pongas todo el código necesario, pero dile, al menos por encima, que hace cada cosa y donde está el título. Commented el 12 abr. 2019 a las 7:33
  • 1
    Hola Arles, como te comenta @Emerita, puedes mejorar tu respuesta dando una breve explicación de cómo funciona el código, porqué hacerlo así y de qué manera esto soluciona el problema. Te invito a leer Cómo responder. Saludos Commented el 12 abr. 2019 a las 7:41
-1

Con display:inline-block; en la clase logo

Así colocaras un Div debajo del otro ^^

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;
  display:inline-block;
}

.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>

1
  • Podrías haber incluido todo el código relevante para una respuesta más clara.
    – Candid Moe
    Commented el 9 mar. 2021 a las 9:33

Tu Respuesta

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

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