Как я могу по центру выровнять элемент, который больше, чем 100% всей страницы? - PullRequest
Новая
       1

Как я могу по центру выровнять элемент, который больше, чем 100% всей страницы?

4 голосов
/ 28 июня 2011

У меня есть ширина div с 100% и скрытое переполнение, содержащее div с шириной 3000 пикселей. Я хочу, чтобы разделение на 3000 пикселей равномерно обрезалось слева и справа. Я бы использовал background-position: center; однако, это сложнее, чем это. Div 3000px содержит 30 div 100px. Я попытался использовать авто поля слева и справа от div 3000px, но это не сработало. Вот CSS: 

.bgAnimHolder{
    width:100%;
    height:500px;
    overflow:hidden;
    position:absolute;
    z-index:1;
    top:0px;
}

.row{
    margin: 0 auto 0 auto;
    height:500px;
    width:3000px;
}

.row div{
    width:100px;
    float:left;
    margin-top:0px;
}

Как расположить div 3000px так, чтобы он располагался посередине экрана, независимо от разрешения экрана? Я готов использовать CSS или JavaScript, в зависимости от того, что необходимо для решения проблемы. Спасибо!

Ответы [ 2 ]

11 голосов
/ 28 июня 2011

Вы можете сделать это с помощью CSS: 

.row {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1500px; /* half of the width */
    height: 500px;
}

Просто убедитесь, что у родителя есть position: absolute/relative

2 голосов
/ 28 июня 2011

Возможно, я не понимаю суть вашей проблемы, но вы можете установить левое и правое поля контейнера равными (одинаковыми) отрицательными значениями.Мой код упрощен для краткости / ясности. 

div.center 
{
    margin:1em -10em; 
    background:#CCC; 
    text-align:center; 
    padding:1em;
}
<div class="center">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
...