Выравнивание элементов внутри div

Рейтинг: 0Ответов: 1Опубликовано: 07.06.2011

Тема наверняка избитая, но остаются непонятки. Пытаюсь сверстать окошко div-ами. Получился вот такой код:

<html>
<head>
<script type="text/javascript" src="script.js"></script>
<style>
    div#popup_container
    {
        width: 240px;
        height: 150px;
        left: 359px;
        top: 206px;
        background-color:#e2d5e9    
    }

    div#popup_left
    {
        width:9px;
        height:150px;
        float:left;
        left:3px
    }

    div#popup
    {
        float:left; 
    }

    div#popup_right
    {
        width:12px;
        height:150px;
        float:right;
    }

    img#img_big
    {
        width:200px;
        margin-left:10px;
        margin-top:10px;
        height:130px;   
    }

    .arrow
    {
        cursor:pointer;
        top:50px;
    }
</style>
</head>
<body>
<div id="popup_container">
    <div id="popup_left"><img src="imgs/arrow_left.png" class="arrow"></div>
    <div id="popup"><img src="" id="img_big"></div>
    <div id="popup_right"><img src="imgs/arrow_right.png" class="arrow"></div>
</div>
</body>
</html>

Вопрос такой: почему для объекта класса arrow нельзя никак задать отступ, кроме как margin? Какие-нибудь padding-top и top принимают значение auto, даже если их задать явно. popup-left тоже нельзя сдвинуть.

css html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Все блочные элементы имеют отступы margin и padding. Например, тут желтый фон - это margin, а красный - это padding. Однако, в режиме разметки strict img могут быть рендерится как inline элементы, по этому часто для всех img явно задают свойство display: block;

Для того, что бы позиционировать элементы относительно текущего местоположения при помощи свойств top, bottom, etc, необходимо выставить свойство position: relative; К примеру, что бы отцентрировать по вертикали элементы с классом arrow, можно задать стиль:

.arrow {
    position: relative;
    top: 50%;
    /* height: 50px; */  /* высота позиционируемого элемента */
    margin-top: -25px;   /* эта величина равна половине высоты элемента  */
}

http://cssdesk.com/2KR6S