Наведите поле с вертикальным и горизонтальным центрированием текста

Я сделал информационный ящик для создания образа-мозаики для клиента. Когда человек наводит изображение (разные ориентации, поэтому его гибкий размер), он получает еще один div над ним с некоторыми сведениями. Гибкость - проблема: я хочу, чтобы содержимое div было вертикально и горизонтально по центру. На данный момент это выглядит так:

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

Но я хочу, чтобы материал появился в середине коробки. Итак, моя первая мысль: padding-top:40%; и высота (может быть!?) 50%, а остальная информация. Я знаю, что мне нужно сделать размер в%, но это просто грубо. У вас есть идеи?

Проект находится здесь: http://www.davidgoltz.de/2011/archive/

Ответ 1

Вы можете посмотреть: Ссылка http://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;
}

Я в основном устанавливаю контейнер для текстового содержимого и выравнивает его по вертикали и по горизонтали к родительскому.

Ответ 2

Это лучшее руководство, которое я нашел для вертикального центрирования/выравнивания содержимого:

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

Из руководства вы можете использовать следующий CSS:

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

Ответ 3

Чтобы центрировать текст в середине div, я нашел лучшие результаты:

.center
{
    margin: auto;
}

Вы также можете использовать:

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

Ответ 4

Посмотрите методы, описанные в этом сообщении в блоге.

Я бы попробовал vertical-align:middle или пошел на это решение:

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

Ответ 5

Этот работает для меня -

HTML:

<a style="display: block;" class="fancybox linkbox-709 linkbox" href="#" onclick="location.href='http://www.davidgoltz.de/2011/wp-content/uploads/2011/08/black-forest.jpg'; return false;">
<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;
}