CSS - text.align. Diferencia de posición en div y span

 
Vista:
sin imagen de perfil

text.align. Diferencia de posición en div y span

Publicado por Ivan Chavarría (14 intervenciones) el 02/01/2018 17:36:50
En el siguiente ejemplo; porque al ponerle al body la propiedad "text-align: center;" el span se corre mas que el div?

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>
<head>
	<title>HTML5</title>
     <meta charset="utf-8">
 
<style>
body{
text-align:center;
}
.tooltip{
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	background: yellow;
}
 
.tooltip .tooltiptext{
	background: #000;
	color: #fff;
	width: 120px;
	text-align: center;
	position: absolute;
	border-radius: 6px;
	z-index: 1;
}
</style>
<script>
 
</script>
</head>
 
<body>
 
<div class="tooltip">
Some text...
<span class="tooltiptext">Some text...</span>
</div>
 
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

text.align. Diferencia de posición en div y span

Publicado por xve (490 intervenciones) el 02/01/2018 19:38:52
Hola Ivan, tienes el <span> dentro del <div> y con position:absolute... prueba a quitarlo del div, o eliminar el position:absolute... veras que funciona correctamente.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

text.align. Diferencia de posición en div y span

Publicado por Julio Cesar (14 intervenciones) el 03/01/2018 00:15:45
Si, eso lo sé, pero entiendo porqué si le quitas el "text-align:center" al body el span queda justo de bajo del div pero con la propiedad no queda justo abajo, se hace más a la derecha.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Pedro
Val: 17
Ha disminuido su posición en 2 puestos en CSS (en relación al último mes)
Gráfica de CSS

text.align. Diferencia de posición en div y span

Publicado por Pedro (4 intervenciones) el 04/01/2018 18:01:06
Sólo hacer un pequeño ápice en vuestro thread:

[1]Un elemento <div> es un elemento bloque.
[2]Un elemento <span> es un elemento en línea.

Por deducción intuyo que el div queda enmarcado dentro de body y el span al ser un elemento del body lo centra al aplicar la propiedad en el css. Cuando quitas la propiedad evidentemente se pega el span al lado izquierdo.Espero haber comprendido lo que preguntas.

Regards to everyone.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar