Alinear verticalmente el texto del palmo dentro del bloque en línea div
Estoy construyendo un sitio web con un diseño plano. Tengo un encabezado y debajo de él dos bloques de colores diferentes uno al lado del otro. Intenté flotar a izquierda y derecha, pero me aconsejaron que usara display: inline-block en su lugar.
Sin embargo, me encontré con un problema. Quiero colocar algo de texto justo en el medio del bloque izquierdo y derecho e intenté usar los elementos de alineación: centro, pero descubrí que solo funciona si el div está configurado para flexionarse.
Entonces mi pregunta es, ¿puedo mantener mi bloque en línea y centrar mi texto en el medio de mis bloques (tanto horizontal como verticalmente)?
body {
margin: 80px 0 0;
}
#pagewrapper {
width: 100%;
}
#header {
width: 100%;
height: 80px;
background-color: #008B8B;
position: fixed;
top: 0;
}
.content-left,
.content-right {
width: 50%;
height: 500px;
color: #FFFFFF;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.content-left {
background-color: #66CC99;
}
.content-right {
background-color: #20B2AA;
}
#header-bot {
height: 800px;
background-color: #F8F8FF;
}
#footer {
height: 50px;
background-color: #AFEEEE;
}
.title {
font-size: 18px;
}<body>
<div id="pagewrapper">
<div id="header">
</div>
<!-- End of Header -->
<div class="content-left">
<span class="title">This is left Content</span>
</div>
<!-- End of Content Left -->
<div class="content-right">
<span class="title">This is Right Content</span>
</div>
<!-- End of Content Right -->
<div id="header-bot">
</div>
<!-- End of Header-Bot -->
<div id="footer">
</div>
<!-- End of Footer -->
</div>
<!-- End of PageWrapper -->
</body>