Cuadro de desplazamiento con texto centrado (vertical y horizontal)

Question

Creé un cuadro de información sobre desplazamiento para un mosaico de imágenes para un cliente. Cuando la persona sobrevuela la imagen (diferentes orientaciones, por lo que su tamaño flexible) obtiene otra div encima con algunas informaciones. La flexibilidad es el problema: quiero que el contenido del div se centre vertical y horizontalmente. Por el momento se ve así:

.linkbox { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 2; 
    width: 100%; 
    height: 100%; 
    color: #fff; 
    font-size: 1.9em; 
    font-weight: bold; 
    background-color: rgba(0, 0, 0, 0.5); 
    text-align: center; 
} 

Pero quiero que las cosas aparezcan en el centro de la caja. Así que mi primer pensamiento: padding-top:40%; y una altura de (tal vez !?) 50% y el resto de la información. Sé que tengo que hacer el tamaño en% también, pero eso es simplemente asqueroso. ¿Tiene alguna idea?

El proyecto se encuentra aquí: http://www.davidgoltz.de/2011/archive/

Answer 1

usted echar un vistazo a esto: Enlacehttp://jsfiddle.net/qfXVa/2/

div.linkbox { 
    position:absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    color: #fff; 
    font-size: 10px; 
    font-weight: bold; 
    background-color: rgba(0, 0, 0, 0.5); 
    text-align: center; 
    display: table; 
    vertical-align: middle; 
} 

div.linkbox div { 
    display: table-cell; 
    vertical-align: middle; 
} 

básicamente me puse un contenedor para el contenido del texto y alineados horizontalmente y verticalmente media a los padres.

Answer 2

Para centrar texto en medio de una div encontré la siguiente funciona mejor:

.center 
{ 
    margin: auto; 
} 

También puede utilizar:

text-align: center; 
vertical-align: middle; 

Answer 3

Este es la mejor guía que he encontrado para centrar/alinear verticalmente el contenido:

http://phrogz.net/css/vertical-align/index.html

De la guía, se puede utilizar el siguiente CSS:

<span style="display:inline-block; vertical-align:middle">Your content</span> 

Answer 4

Tener un vistazo a los métodos descritos en this blog post.

me gustaría probar vertical-align:middle o ir a esta solución:

<div id="top"> 
<h1>Title</h1> 
</div> 
<div id="floater"></div> 
<div id="content"> 
Content Here   
</div> 

#floater {float:left; height:50%; margin-bottom:-120px;} 
#top {float:right; width:100%; text-align:center;}</strong> 
#content {clear:both; height:240px; position:relative;} 

Answer 5

Esta funciona para mí -

HTML:

<a style="display: block;" class="fancybox linkbox-709 linkbox" href="http://www.davidgoltz.de/2011/wp-content/uploads/2011/08/black-forest.jpg"> 
<div id="wrapperC" style="display: table; height: 100%; vertical-align: middle;"> 
    <div id="cell" style="display: table-cell; vertical-align: middle;"> 
     <div class="content"> 
      <span class="datum">Aug 8th</span> 
      <h1 class="post-title-archive">Black Forest</h1> 
     </div> 
    </div> 
</div> 

CSS:

.wrapperC { 
    display: table; 
    height: 100%; 
    vertical-align: middle; 
} 

.wrapperC { 
    display: table-cell; 
    vertical-align: middle; 
}