DIV - Alinear texto vertical y horizontalmente
Publicado por Ralph (2 intervenciones) el 04/06/2013 23:09:24
Buenas noches.
Intento maquetar una web usando DIV. La parte superior tiene 3 DIV: izquierdo, derecho y centro. El centro tiene el ancho definido para el área que tendrá el contenido de la página web.Los DIV izquierdo y derecho son los espacios que están fuera.
El DIV central de la parte superior lo he dividido en 3 DIV, centro1 para el logotipo, centro2 para el nombre de la empresa y centro3 para otros datos.
Es en este DIV centro3 que cuando intento alinearlo verticalmente al centro y horizontalmente a la derecha, los textos de desplazan hacia abajo de tal forma que salen del espacio definido para la parte superior.
He notado que cuando quito la propiedad line-height del DIV que contiene toda la parte superior (codrops-top), el texto que intento alinear queda de la forma que quiero que queda, pero el problema es que el color de fondo que rellena toda la parte superior casi desaparece.
Os voy a colocar el código htm y el css para que una mejor visualización.
*Html*
*CSS*
Alguna sugerencia para solucionar este problemilla?
Muchas Gracias.
Saludos.
Intento maquetar una web usando DIV. La parte superior tiene 3 DIV: izquierdo, derecho y centro. El centro tiene el ancho definido para el área que tendrá el contenido de la página web.Los DIV izquierdo y derecho son los espacios que están fuera.
El DIV central de la parte superior lo he dividido en 3 DIV, centro1 para el logotipo, centro2 para el nombre de la empresa y centro3 para otros datos.
Es en este DIV centro3 que cuando intento alinearlo verticalmente al centro y horizontalmente a la derecha, los textos de desplazan hacia abajo de tal forma que salen del espacio definido para la parte superior.
He notado que cuando quito la propiedad line-height del DIV que contiene toda la parte superior (codrops-top), el texto que intento alinear queda de la forma que quiero que queda, pero el problema es que el color de fondo que rellena toda la parte superior casi desaparece.
Os voy a colocar el código htm y el css para que una mejor visualización.
*Html*
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
<div class="container">
<!-- Inicio Barra superior --><div class="codrops-top">
<div class="codrops-topizquierdo"> </div>
<div class="codrops-topcentro">
<div class="codrops-top-centro1"><img src="images/logo.png">
</div>
<div class="codrops-top-centro2">
<div class="codrops-top-centro-top"><h1>Empresa</h1>
</div>
<div class="codrops-top-centro-bottom"><h2>Clínica/h2>
</div>
<div class="codrops-top-centro3">
<div class="codrops-top-centro-top1">
CC Carrefour
Planta 1ª
</div>
<div class="codrops-top-centro-top1">
Nº Telf.</div>
<div class="codrops-top-centro-bottom1">
info@empresa.es</div>
</div>
</div>
<div class="codrops-topderecho"> </div>
</div>
<!-- Fin Barra Superior --> <!-- Inicio Barra Inferior --><div class="codrops-topinferior"> </div>
<!-- Fin Barra Inferior --></div> <!-- Fin clase contenedora -->
*CSS*
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
body{font-family: 'Tahoma','Open Sans Condensed','Arial Narrow', serif;
background: #ddd url(../images/fondo1aclarado.jpg) no-repeat; background-position:center;
font-weight: 400;
font-size: 12px;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
overflow: hidden;margin: 0;}
.container{
width: 100%;
position: relative;height: 100%;
top: 0px; bottom: 0px; margin: auto;}.codrops-top{
position: relative; margin: auto;line-height: 100px;
background: rgba(255, 192, 0, 0.6);
z-index: 9999;
box-shadow: 5px 3px 2px rgba(0,0,0,0.2);
}.codrops-topizquierdo{
background: inherit; float: left;width: 10%;
}.codrops-topcentro{
background: inherit; /*hereda propiedades div contenedor codrops-top*/
float: left;width: 80%;
vertical-align: top;
}.codrops-topderecho{
background: inherit; /*hereda propiedades de div contenedor codrops-top*/
float: left;}.codrops-topinferior{
line-height: 0px;
z-index: 9999;
box-shadow: 0 8px 3px -5px rgba(0,0,0,0.2);
border-radius: 0px;
}.codrops-top-centro1{
float: left;width: 10%;
text-align: left;
margin-bottom: 0px;
line-height: 0; /*Borra espacio extra debajo que genera colocar imagen*/
}.codrops-top-centro2{
float: left;width: 45%;
text-align: center;
margin: 0 auto;line-height: 0;
}.codrops-top-centro3{
float: right;width: 45%;
text-align: right;
margin:0;}.codrops-top-centro-top{
height:30px; float: left; clear: both;vertical-align: middle;
}.codrops-top-centro-bottom{
height:30px; float: left; clear: both;text-align: center;
margin: 0; padding: 0;}.codrops-top-centro-top > h1{
font-family: Lucida Handwriting;
font-size: 30px;
line-height: 40px;
margin-left: 200;
position: relative;font-weight: 100;
text-align: center;
color: #00b050;
text-shadow: 1.5px 1.5px 1.5px rgba(255,255,255,1);
}.codrops-top-centro-bottom > h2{
font-family: Papyrus;
font-size: 20px;
line-height: 40px;
margin-left: 200;
position: relative;font-weight: 100;
text-align: center;
top: 0;color: #000;
text-shadow: 1.5px 1.5px 1.5px rgba(255,255,255,1);
}Alguna sugerencia para solucionar este problemilla?
Muchas Gracias.
Saludos.
Valora esta pregunta
0
