0

He querido aplicar un borde inferior (a modo de subrayado) para un encabezado. Para que el "subrayado" ocupara solo el ancho del texto se me ha ocurrido convertir la etiquita en inline (no se si hay otra manera desde CSS).

El problema es que intento centrar este encabezado con margin:0 auto y no se centra. ¿Por qué?

Además no entiendo por qué, al aplicar un float al párrafo, este se sube hasta la altura del encabezado, ya que pensaba que el float se genera desde la etiqueta en la que se aplica hacia abajo (he indicado el borde rojo para que se vea mas claro su borde superior).

<!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:3px dashed black;
                
display:inline;
                
margin:0px auto
font-size:2rem;}

p{ font-size:2rem;
width:50%;
float:right;
border:1px solid red;}

img{border:10px solid black;
margin-top:20px;}
</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>

Un saludo

7
  • No se centra precisamente porq la convertiste en inline. Su width sera su contenido. Podrias usar flexbox para centrarla Commented el 23 abr. 2021 a las 22:05
  • Podria subrayar unicamente el texto del encabezado sin convertirla en inline??
    – Israel
    Commented el 23 abr. 2021 a las 22:12
  • Realmente no estas subrayando el texto en un contenedor block sino el contenedor en si mismo. Para el texto usa textdecoration: underline Commented el 23 abr. 2021 a las 22:20
  • Gracias Hernán. El problema es que según tengo entendido con text-decoration no puedes modificar ni estilo de trazo, ni color, ni grosor ni padding
    – Israel
    Commented el 23 abr. 2021 a las 22:29
  • Claro. Por eso t recomiendo uses flexbox. Pones el elemento q qieres centrar en un div con una clase y a esa clase le das estilo display: flex justifyContent:center y lo tendras centrado al elemento inline Commented el 23 abr. 2021 a las 22:36

1 respuesta 1

0

Tal y como dijo el usuario Hernán Garcia, la solución simple es poniendo el encabezado en un Div, al cual le aplicas el "Justify-content: Center;" en una clase. Lo que hará que el texto dentro del Div se centre de manera Horizontal.

Espero haberte ayudado, buen día.

<!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:3px dashed black;
                    
    display:inline;
                    
    margin:0px auto
    font-size:2rem;}

/* La clase aplica el centrado a los elementos dentro del Div */
    .centrar {
    display: flex;
    justify-content: center;
    }

    p{ font-size:2rem;
    width:50%;
    float:right;
    border:1px solid red;}

    img{border:10px solid black;
    margin-top:20px;}
    </style>
    </head>

    <body>
<div class="centrar">
    <h1>Rio: Curso de agua</h1>
</div>
    <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>

2
  • Gracias por tu respuesta
    – Israel
    Commented el 28 abr. 2021 a las 10:38
  • Un placer (Y) ;)
    – Cyco
    Commented el 28 abr. 2021 a las 20:47

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.