Skip to main content
2 de 2
Formato de código, ortografía.
jachguate
  • 32.1k
  • 8
  • 41
  • 69

No consigo centrar el encabezado

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