CSS - Por que no se centra horizontalmente la etiqueta?

Pos: 14

Val: 66

Por que no se centra horizontalmente la etiqueta?

Publicado por Israel (51 intervenciones) el 23/04/2021 23:18:55

Varios problemas en el siguiente codigo HTML y CSS:

A) Para poder generar un borde inferior a modo de subrayado para el encabezado (<h1>) que solo abarcara el texto no el 100 % de la anchura del <body> y poder, ademas, anadir un margen superior, he anadido la propiedad display:inline-block. El problema es que al intentar centrar el encabezado horizontalmente dentro del <body> a traves de margin: 20px auto; no se centra. Pq?

B) Aplico un float:right al parrafo para que la imagen se coloque a su izquierda y curiosamente el parrafo se sube a la altura del encabezado. Pq?

C) Es posible crear una sombra solo al borde inferior del encabezado?

Un saludo.

<!DOCTYPE html>

<html lang="en"> <!--Se elige "en" para construir la pagina en ingles-->

    <head>

        <title>Uso de la propiedad display</title>

            <style>

            html{background-color:blue;}

            body{width:60%;

                background-color:gray;

                margin:0 auto;

                padding:30px;}

            h1{border-bottom:6px solid black;

                box-shadow:5px 5px 8px black;

                display:inline-block;

                margin:20px auto;

                font-size:3rem;}

            p{ font-size:2rem;

            width:50%;

            float:right;

            margin-right:30px;}

            img{border:10px solid black;}

        </style>

    </head>

    <body>

        <h1>Rio: Curso de agua</h1>

        <p>Un río o flujo de agua es una corriente natural de agua que fluye con continuidad por un cauce en la superficie terrestre. Posee un caudal determinado, rara vez es constante a lo largo del año, y desemboca en el mar, en un lago o en otro río, en cuyo caso se denomina afluente.</p>

        <img src="rioAmazonas.jpg" title="Rio Amazonas" width="40%">

    </body>

</html>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 870

Por que no se centra horizontalmente la etiqueta?

Publicado por joel (252 intervenciones) el 24/04/2021 08:30:39

Hola Israel, al poner un elemento con block-inline, lo que haces es ponerle una anchura que no ocupa el 100% por lo que otro elementos se pueden poner al lado.

La solución pasa por contener el H1 dentro de un elemento que tenga el display block, y centrarlo dentro de esa capa... algo así:

<!DOCTYPE html>

<html lang="en"> <!--Se elige "en" para construir la pagina en ingles-->

    <head>

        <title>Uso de la propiedad display</title>

            <style>

            html{background-color:blue;}

            body{width:60%;

                background-color:gray;

                margin:0 auto;

                padding:30px;}

            header {

                text-align: center;

            h1{border-bottom:6px solid black;

                box-shadow:5px 5px 8px black;

                display:inline-block;

                margin:20px auto;

                font-size:3rem;}

            p{ font-size:2rem;

            width:50%;

            float:right;

            margin-right:30px;}

            img{border:10px solid black;}

        </style>

    </head>

    <body>

        <header>

            <h1>Rio: Curso de agua</h1>

        </header>

        <p>Un río o flujo de agua es una corriente natural de agua que fluye con continuidad por un cauce en la superficie terrestre. Posee un caudal determinado, rara vez es constante a lo largo del año, y desemboca en el mar, en un lago o en otro río, en cuyo caso se denomina afluente.</p>

        <img src="rioAmazonas.jpg" title="Rio Amazonas" width="40%">

    </body>

</html>

se entiende?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 14

Val: 66

Por que no se centra horizontalmente la etiqueta?

Publicado por Israel (51 intervenciones) el 24/04/2021 13:10:10

Hola Joel,

Gracias por tu mensaje, ha sido de utilidad.

Entiendo lo que hace, en este ejemplo, la propiedad text-align; pero o no entiendo algo o hay una inconsistencia conceptual con esta propiedad. Va a ser una explicación un poco larga, lo siento, pero necesito seguir un razonamiento para llegar a la pregunta final. A ver si consigo explicarme:

Suponiendo que directamente dentro del <body>:

<body>
<p>Esto es un párrafo</p>
</body>

a) Su contenido (el texto) se puede centrar horizontalmente en la ventana del Navegador con la propiedad text-align:center.

p{font-size:2rem;
border:1px solid red;
text-align:center;}

b) Si a ese <p> le fijamos una anchura determinada, y queremos centrar dicho contenedor en la pagina usamos margin-left:auto y margin-right:auto.

p{font-size:2rem;
border:1px solid red;
text-align:center;
width:50%;
margin:0 auto;}

Así que para el caso de etiqueta de tipo block-level (como por ejemplo <p>) el centrado del texto dentro de su caja se hace con text-align y para el centrado de la propia caja se usa margin. Hasta ahi creo entenderlo.

Si ese <p> lo englobamos dentro de un <div>:

<div>
<p>Esto es un párrafo</p>
</div>

Y es al propio <div> al que aplicamos las propiedades anteriores:

div{font-size:2rem;
border:1px solid red;
text-align:center;
width:50%;
margin:0 auto;}

Conseguimos lo mismo. Supongo que en el caso de text-align pq esta es heredable y entonces <p> la hereda y ejecuta; y en el caso de margin pq aunque no es heredable, como <p> se encuentra dentro de <div> pues al centrar el <div> se centra indirectamente <p>.

Creo que hasta aqui el razonamiento es correcto, corrígeme si me equivoco.

Ahora bien (llegamos al final de mi largo largo comentario), si estamos hablando de una etiqueta inline:

<body>
<a href="https://www.google.com">GOOGLE</a>
</body>

Ni la propiedad text-align, ni margin (para el caso de establecer el valor auto), ni siquiera la propiedad width, funcionan. Así que la solución (como bien explicabas) pasa por meter la etiqueta inline dentro de una etiqueta de tipo block-level:

<div>
<a href="https://www.google.com">GOOGLE</a>
</div>

Y al aplicar las propiedades anteriores al <div>, entonces, se centra tanto texto como su contenedor.

div{font-size:2rem;
border:1px solid red;
text-align:center;
width:30%;
margin:0 auto;}

Ahí va la pregunta........

Si el razonamiento anterior es cierto, al aplicar text-align al <div>, la etiqueta <a> hereda dicha propiedad y la ejecuta. Pero, eso significaría que el texto (GOOGLE) se centra respecto de su propio contenedor (<a>) que se quedaría como está puesto que el contenedor del <a> ocupa lo mismo que su texto (porque es etiqueta inline). En cambio, se centra en la ventana del Navegador.

Por qué?????

Un saludo.

Valora esta respuesta

Comentar

Pos: 1

Val: 870

Por que no se centra horizontalmente la etiqueta?

Publicado por joel (252 intervenciones) el 25/04/2021 09:05:25

Hola Israel, tu razonamiento es completamente correcto!!!!

Sobre tu pregunta, cuando aplicas text-align, no lo haces sobre el elemento, sino sobre su contenido. No puedes centrar horizontalmente un elemento que ocupa el 100% de la anchura como es el <div>, por eso centrar su contenido.
Y puede centrar el elemento <a>, porque no ocupa el 100% de la pantalla, porque si fuera un <div>, no lo podría centrar, pero como se hereda (ta y como comentas), centraria el elemento en su interior que sea posible centrar.

Mira este ejemplo, solo se pone el text-align en el primer div, pero la resta los hereda y finalmente centra el texto que no tiene una anchura del 100%:

<head>

    <style>

        body>div {text-align: center;}

    </style>

</head>

<body>

    <div>

        <div>

            <div>

                text

            </div>

        </div>

    </div>

</body>

No se si me he sabido explicar... pero al final centrar el primer elemento en su interior que permite ser centrado

Valora esta respuesta

Comentar

Pos: 14

Val: 66

Por que no se centra horizontalmente la etiqueta?

Publicado por Israel (51 intervenciones) el 28/04/2021 12:35:57

Hola de nuevo Joel,

Creo que con este ejemplo se puede entender mejor a lo que me refiero:

Ejemplo:

<html>

    <head>

        <title>Propiedad text-align</title>

        <style>

		body{

			background-color:white;}

		p{width:150px;

			border:1px solid black;}

		.contenedor1{

				text-align:center;

				width:80%;

				border:1px solid red;}

		.contenedor2{

				width:80%;

				border:1px solid green;}

		.contenedor3{

				width:80%;

				border:1px solid blue;}

		.contenedorA{

				text-align:center;

				width:80%;

				border:1px solid red;}

		.contenedorB{

				width:80%;

				border:1px solid green;}

		.contenedorC{

				width:80%;

				border:1px solid blue;}

	</style>

    </head>

    <body bgcolor="red">

        <div class="contenedor1">

		<div class="contenedor2">

			<div class="contenedor3">

				<p>TEXTO</p>

			</div>

		</div>

	</div>

	<br><br>

	<div class="contenedorA">

		<div class="contenedorB">

			<div class="contenedorC">

				<a href="https://www.google.com">GOOGLE</a>

			</div>

		</div>

	</div>

    </body>

</html>

Explicación de como yo lo entiendo:

1) Para el primer conjunto de <div>:

Se aplica text-align al primer <div> (contenedor1). Por efecto de la herencia, como ya hemos conmentado, pasa al segundo <div> y al tercero y finalmente a la etiqueta <p>. Qué es lo que hace text-align en este caso???

Alinea horizontalmente (align) el texto (text) dentro de su contenedor. En este caso el texto es "TEXTO" y el contenedor <p>. Lo centra dentro de su propio contenedor, NO RESPECTO DEL CONTENEDOR PADRE DE <p> (es decir, el <div>).

2) Para el segundo conjunto de <div>:

De forma totalmente analoga al primer grupo de <div>, se aplica la propiedad text-align al primer <div> y por herencia llega a la etiqueta <a>. Pues bien, según lo visto antes, el texto, es decir, "GOOGLE" debería centrarse respecto de su propio contenedor <a> (como se trata de una etiqueta inline su contenedor tiene la anchura del texto que contiene, lo que significariía que el texto se quedaria donde está), NO RESPECTO DEL CONTENEDOR PADRE DE <a> (es decir, el <div>). Pero...................

El texto de <a> se centra respecto del <div>.

Conclusión:

Creo que se puede concluir que La propiedad text-align centra el texto respecto de su propia etiqueta en el caso de etiquita tipo block-level; pero en el caso de etiquetas tipo inline no centra texto sino el contenedor de dichas etiquetas inline respecto del contenedor padre.

A eso me refiero con inconsistencia de la propiedad text-align; unas veces centra texto (en etiquetas block-level) y otras el contenedor (etiquetas inline).

Espero haberme explicado. Crees que mi razonamiento es correcto?

Valora esta respuesta

Comentar

Evitar doble clic en imagen con texto encima

Espacio en blanco sobre texto