DIV позиционирование - PullRequest
Новая
       37

DIV позиционирование

1 голос
/ 12 августа 2011

Эй, это моя ссылка: http://ilikeyou.tk/409/

Я пытаюсь расположить кнопки «Вперед» и «Назад» (<и>) внутри контейнера like_box_page.

Сначала я центрировал кнопки, используя ответ здесь: Выровнять по вертикали DIV

Что бы я ни делал, кнопки все еще не на своем месте. Есть ли способ центрировать их горизонтально в контейнере?

Ответы [ 6 ]

2 голосов
/ 12 августа 2011

В вашем предыдущем CSS-коде просто замените margin-left: 10px; на полях слева: 200 пикселей;
и margin-rigt: 10px; справа от поля: 200px;

2 голосов
/ 12 августа 2011

добавить margin-top: -25px; в .navigation, чтобы центрировать навигацию по центру высоты, а не начинать с центра.

P.S. margin-top: -25px или (yourCOntainerHeight) / 2 как отрицательное поле, потому что у вас есть top: 50%, что означает, что ваш элемент будет начинаться с 50% высоты контейнера, и вы должны компенсировать отрицательное поле, чтобы быть точно в середине. 1004 *

Привет

2 голосов
/ 12 августа 2011

В вашем .navigation вам нужно изменить margin следующим образом 

.navigation {
    position: absolute;
    margin: 0 0 0 -20px;  //HERE
    top: 50%;
    height: 50px;
    width: 100%;
    z-index: 1;
}

Возможно, вы также захотите дать img под ним еще margin.

<img style="margin-left:40px;"

enter image description here

2 голосов
/ 12 августа 2011

Вы пробовали использовать абсолютное позиционирование? установите родительский div на postion:relative, а ссылки на position:absolute и установите свойство top. Это может быть не идеально, но я думаю, что это будет работать.

2 голосов
/ 12 августа 2011

Я бы изменил даже структуру HTML, но если играть с этим HTML ---

Перезаписать эти 3 класса: 

.img_spot {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    float: left;
    margin-left: 0 !important;
    margin-right: 20px;
    max-width: 333px;
}

.navigation {        
    height: auto;
    left: -5px;
    margin: 30px 0;
    padding: 0;
    position: absolute;
    width: 636px;
}

.like_box_page {
    background: none repeat scroll 0 0 #F8F8F8;
    border: 1px solid #E4E3E3;
    box-shadow: 0 3px 0 #E9E9E9 inset;
    float: left;
    padding: 16px 61px 13px;
    position: relative;
}
2 голосов
/ 12 августа 2011

используйте плагин firebug для firefox, и вы увидите, что они очень в центре вашего ящика, остальное просто выключено: D Он также намного больше своего родителя.

...