За последние 24 часа нас посетили 17477 программистов и 1712 роботов. Сейчас ищет 1551 программист ...

Выравнивание вложенных div внутри div

Тема в разделе "HTML и CSS", создана пользователем rolling, 11 ноя 2010.

  1. rolling

    rolling Активный пользователь

    С нами с:
    20 авг 2009
    Сообщения:
    75
    Симпатии:
    0
    Имеет следующу ситуацию
    HTML:
    1. <div id="content">
    2.    <div class="person">
    3.    ....
    4.    </div>
    5.    <div class="person">
    6.    ....
    7.    </div>
    8.    <div class="person">
    9.    ....
    10.    </div>
    11.    <div class="person">
    12.    ....
    13.    </div>
    14.    <div class="person">
    15.    ....
    16.    </div>
    17.    <div class="person">
    18.    ....
    19.    </div>
    20. </div>
    [css]#content {
    text-align: center;
    font-family: calibri, arial;
    width: 1000px;
    }

    div.person {
    text-align:center;
    float: left;
    width: 200px;
    min-height:185px;
    border:1px solid #93B4D9;
    padding:5px;
    background: #CADEF4;
    font-family: arial;
    font-size: 14px;
    margin:15px;
    }[/css]

    Необходимо сделать так, чтоб все <div class="person"> размещались по центру внутри <div id="content">
    Вприведенном выіше коде они прижаты к левому краю.
    Подскажите п-ста, что я делаю неправильно. Как достичь нужного результата?
     
  2. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    <div id="content" align="center">
     
  3. rolling

    rolling Активный пользователь

    С нами с:
    20 авг 2009
    Сообщения:
    75
    Симпатии:
    0
    увы, не помагает ((
     
  4. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    rolling
    потому что вложенные не нужно ровнять по левой стороне. float: left; - убери
     
  5. rolling

    rolling Активный пользователь

    С нами с:
    20 авг 2009
    Сообщения:
    75
    Симпатии:
    0
    в этом случае выравнивает.
    Но я забыл упомянуть, что <div class="person"> являют собой квадраты, которые должны распологаться по несколько штук в один ряд. Если убираю float: left; - получаем каждый <div class="person"> в новом ряду.
    Можно ли в таком случае что-то препринять?
     
  6. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    тогда внутренности <div id="content"> надо впихнуть еще в один див. внутри которого делать float: left;, а сам же этот средний контейнер выравнивать по центру.
     
  7. neverlose

    neverlose Активный пользователь

    С нами с:
    27 авг 2008
    Сообщения:
    1.112
    Симпатии:
    20
    или display: inline :), внутри которого block 200px
     
  8. rolling

    rolling Активный пользователь

    С нами с:
    20 авг 2009
    Сообщения:
    75
    Симпатии:
    0
    я, кажется, понимаю в чем проблема. Визуально <div id="content"> имеет высоту 0пкс, и <div class="person"> как висять за его пределами.
    Ранее <div class="person"> были вложены в ячейки таблицы - было все ок.
     
  9. rolling

    rolling Активный пользователь

    С нами с:
    20 авг 2009
    Сообщения:
    75
    Симпатии:
    0
    хотя почему так происходит - не понимаю. z-index нигде не используется
     
  10. neverlose

    neverlose Активный пользователь

    С нами с:
    27 авг 2008
    Сообщения:
    1.112
    Симпатии:
    20
    добавь в конце дива <div style="clear: both;"></div>
     
  11. neverlose

    neverlose Активный пользователь

    С нами с:
    27 авг 2008
    Сообщения:
    1.112
    Симпатии:
    20
    <div id="content">
    <div class="person">
    ....
    </div>
    <div class="person">
    ....
    </div>
    <div class="person">
    ....
    </div>
    <div class="person">
    ....
    </div>
    <div class="person">
    ....
    </div>
    <div class="person">
    ....
    </div>
    <div style="clear: both;"></div>
    </div>