Вертикальное выравнивание в CSS, высота не известна - PullRequest
Новая
       1

Вертикальное выравнивание в CSS, высота не известна

2 голосов
/ 22 марта 2012

Вот моя разметка: 

<div id="container">
    <img id="image" src="image.jpg" />
    <div id="contents">Contents</div>
</div>

Высота #container равна высоте #image.Все высоты являются динамическими (они изменяются при изменении размера окна).Изображение не может быть установлено с помощью свойства background.

Как получить содержимое над изображением и центрировать его по вертикали в #container?

Ответы [ 3 ]

1 голос
/ 22 марта 2012

Известна ли высота #contents? В этом случае это должно быть сделано ( jsfiddle demo ): 

#container{
    position:relative;

    /* For demo only */
    height:500px;
    border: 5px solid red;
}
#image{ 
    position:absolute;

    /* For demo only */ 
    height:500px; 
}

#contents{
    position: absolute;
    top:50%;

    height:100px;
    margin-top: -50px; /* Half of #contents height */   

    /* For demo only */ 
    background-color: blue;
}
1 голос
/ 22 марта 2012

Это должно делать то, что вы ищете. Я только что установил высоту контейнера и изображения в css, но если они одинаковы в html или с использованием javascript, результат должен быть одинаковым. Цвет фона просто для наглядности. 

#container {
background-color: #333;
height: 200px;
}
#image{
height: 200px;
float: left;
}
#contents{
line-height: 200px;
float: left;
position: fixed;
}

1004 *

РЕДАКТИРОВАТЬ: Вот скрипка решения, использующая старый классический маркер автоматического трюка Единственное, что может вызвать проблемы, это то, что родитель должен быть в позиции: исправлен; что может вызвать проблемы для вас в другом месте. Главное, что это работает, и высоты не задаются с помощью пикселей.

ссылка

Вот код из скрипки для чистого решения CSS без фиксированных высот. 

<div id="container">
    <img id="image" src="https://www.google.co.uk/logos/2012/juan_gris-2012-hp.jpg" />
    <div id="contents">Contents</div>
</div>

#container {
    position: fixed;
}
#contents{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 10%;
    margin: auto;
}
0 голосов
/ 22 марта 2012

Если вы знаете высоту #contents, вы можете настроить 

#container{position:relative;}
#contents{
    position:absolute;
    top:50%; /*50% of parent*/
    margin-top:/*negative one-half of container height i.e. if contaner is 4 em -2em*
}

Вы говорите, что не знаете высоту #contents.

Другой вариант -чтобы установить отображение: на table-cell и использовать vertical-align: middle

#container{
    display: table-cell;
    vertical-align: middle;
}

Но в зависимости от того, какие браузеры вы поддерживаете, это также может вызвать проблемы с отображением.

Чем большеВерный путь - это объединить первый вариант с некоторым jquery или javascript, чтобы найти высоту элемента и установить его margin-top: 

content= document.getElementById('content')
content.style.marginTop = '-' + content.offsetHeight + 'px';

http://jsfiddle.net/h76sy/

РЕДАКТИРОВАТЬ: Извините, в моем javascript была ошибка, попробуйте сейчас

...