CSS - DIV - Alinear texto vertical y horizontalmente

   
Vista:

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*
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
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

DIV - Alinear texto vertical y horizontalmente

Publicado por xve (350 intervenciones) el 05/06/2013 07:52:06
Hola Ralph, he probado tu código, y la verdad que se ve fatal... puede ser que te hayas dejado estilos?
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

DIV - Alinear texto vertical y horizontalmente

Publicado por José Luis Truque (2 intervenciones) el 05/05/2014 14:21:52
Últimamente han aparecido con css3 una serie de instrucciones que en teoría deberían centrar las cajas.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.caja centrada {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
 
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
 
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Funciona perfectamente en Chrome, Safari y Ópera, pero no centra el texto en Firefox ni en Internet Explorer. Esto es debido a que lo que centra es la caja (div) pero NO lo que hay dentro.
Para centrar el interior de la caja lo hacemos así:
En el div que queremos centrar el texto ponemos
1
2
3
4
5
.caja
{
text-align:center; (esto centra en horizontal)
 display:table; (esto prepara para centrar en vertical)
}
Ahora, creamos un estilo para el texto de esa caja
1
2
3
4
.caja h6
{	display:table-cell;
	vertical-align:middle;
}
Yo he colocado h6 porque el texto lo voy a poner como encabezado h6, pero se podría poner
1
2
3
4
.caja p
{	display:table-cell;
	vertical-align:middle;
}
y funcionaría con todos los párrafos.

En cuanto a Internet Explorer anteriores a la versión 8 , he decidido hacer como Microsoft; NO DARLES SOPORTE.
Puedes verlo perfectamente en la página de mi colegio:
www.joaquincarrion.com
Saludos cordiales y espero que te sirva.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

DIV - Alinear texto vertical y horizontalmente

Publicado por José Luis Truque (2 intervenciones) el 07/05/2014 09:54:15
Si se quieren poner varios párrafos, hay que separarlos con salto de línea </br>, de lo contrario, si ponemos varios <p> texto</p> nos saldrían cada párrafo como una celda.
Ejemplo:
<div class="col2" ><h6>EL 5 MAYO DAMOS COMIENZO LA XV SEMANA CULTURAL "INVENTOS E INVENTORES" <br/><a href="XV SEMANA CULTURAL (Programa).pdf">VER PROGRAMA </a></h6>
</div>
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