Pole zawieszek z (pionowo i poziomo) wyśrodkowanym tekstem

Question

Zrobiłem okienko z informacją na temat obrazu mozaiki dla klienta. Kiedy osoba unosi obraz (różne orientacje, a więc jego elastyczne wymiary), otrzymuje nad nim kolejny div z pewnymi informacjami. Elastyczność jest problemem: chcę, aby zawartość div była wyśrodkowana w pionie i w poziomie. W tej chwili wygląda to tak:

.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; 
} 

Ale chcę, aby rzeczy pojawiły się w środku pudełka. Tak więc moja pierwsza myśl: padding-top:40%; i wysokość (może !?) 50%, a resztę dla Informacji. Wiem, że muszę również zrobić rozmiar w%, ale to po prostu brutto. Masz jakiś pomysł?

Projekt jest tutaj: http://www.davidgoltz.de/2011/archive/

Answer 1

Trzeba spojrzeć na to: linkhttp://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; 
} 

I w zasadzie ustawiony pojemnik do zawartości tekstowej i wyrównany go pionowo i poziomo środek do rodzica.

Answer 2

Aby wyśrodkować tekst w środku div znalazłem następujące działa najlepiej:

.center 
{ 
    margin: auto; 
} 

Można również użyć:

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

Answer 3

Jest najlepszy przewodnik, który znalazłem w pionowym wycentrowaniu/wyrównaniu treści:

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

Z przewodnika, można użyć następującego CSS:

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

Answer 4

Prosze zapoznać się z metodami opisanymi w this blog post.

chciałbym spróbować vertical-align:middle lub przejdź do tego rozwiązania:

<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

Ten działa dla mnie -

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; 
}