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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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


0