Как сделать блок по центру?

Тема в разделе "Веб-дизайн", создана пользователем krasniy, 31 июл 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. krasniy

    krasniy

    Регистр.:
    21 апр 2006
    Сообщения:
    712
    Симпатии:
    112
    Подскажите пожалуйста, почем div не отображается по центру страницы в IE, а в ФФ все пучком
    HTML:
    
    #header {
        height: 60px;
        width: 960px;
        margin: 0 auto;
        display: block;
        position:relative;
        }
     
  2. vadoru

    vadoru Постоялец

    Регистр.:
    28 янв 2007
    Сообщения:
    122
    Симпатии:
    46
    Стиль правильный и все отображается нормально в IE6,IE7,IE8 - лично проверял.
     
  3. krasniy

    krasniy

    Регистр.:
    21 апр 2006
    Сообщения:
    712
    Симпатии:
    112
    убедитесь http://www.nadodesign.com.ua
     
  4. Bereza

    Bereza

    Регистр.:
    9 май 2007
    Сообщения:
    222
    Симпатии:
    69
    <DIV id=header>
    добавь align="center"
    чтобы было <DIV id=header align="center">

    заработает ))
     
    krasniy нравится это.
  5. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    не отображается по центру потому что нет доктайпа xhtml 1.0
     
    krasniy нравится это.
  6. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    337
    Симпатии:
    45
    та не. тут все ошиблись. надо что бы вышестоящий блок имел text-align:center.
    напрмиер так:
    HTML:
    
    body {text-align:center;}
    body div {margin:0 auto; text-align:left;}
    
    <html>
    <body>
    <div>
    </div>
    </body>
    </html>
    
     
  7. x_Dev

    x_Dev Создатель

    Регистр.:
    2 фев 2009
    Сообщения:
    13
    Симпатии:
    1
    align'aми и text-align центрировать блоки это пошло... Верное решение все же доктайп..
     
  8. mittus

    mittus Создатель

    Регистр.:
    12 июл 2009
    Сообщения:
    72
    Симпатии:
    11
    HTML:
    #header {
        height: 60px;
        width: 960px;
        margin-left:auto;
        margin-right:auto;
        text-align:left;
        display: block;
        position:relative;
        }
     
  9. Supergrass

    Supergrass Писатель

    Регистр.:
    27 май 2009
    Сообщения:
    9
    Симпатии:
    0
    <style>
    body {text-align:center}

    </style>
    </head>
    <body>

    <div style="text-align:left;position:relative;top:40%;width:200px;height:20%;border:1px solid blue;padding:0px">
    <div style="position:relative;top:3px;left:3px;width:50px;height:10%;border:1px solid red"></div>

    Добавлено через 1 минуту
    <style type="text/css">
    #t {
    background-color:#009999;
    position: relative;
    height: 400px

    }


    #in1 {
    position: absolute;
    top: 50%;
    border: red dashed;
    }
    </style>


    </head>

    <body>
    <div id="t" style="border:#999999 thick dashed">
    <div id="in1"><p style=" position: relative; top: -50%; border:#0000FF dotted">
    any text<br />
    any height<br />
    any content, for example generated from DB<br />
    everything is vertically centered
    </p></div>
    </div>

    Добавлено через 2 минуты
    <style type="text/css">
    <!--
    * html body {
    height: 100%; /* замена min-height:100% для IE6 */
    margin: 0;
    padding: 0;
    }

    body {
    position: relative; /* абсолютно позиционируемые элементы
    будут располагаться относительно body */
    }

    .wrap {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    }
    .inner {
    margin-top: expression(((wrap.offsetHeight/2)
    -parseInt(offsetHeight)/2) <0 ? "0" :
    (wrap.offsetHeight/2)
    -(parseInt(offsetHeight)/2) +'px')
    margin-left: auto;
    margin-right: auto;
    margin-left: auto;
    }
    -->
    </style>
    </head>
    <body>




    <?php include("menu.html"); ?>

    <div id="wrap" class="wrap">
    <div id="inner" class="inner">Здесь располагается содержимое class "inner"lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</div>
    </div>



    <?php include("bottom.php"); ?>
    </body>
     
  10. krasniy

    krasniy

    Регистр.:
    21 апр 2006
    Сообщения:
    712
    Симпатии:
    112
    А как сделать что бы блок был еще и по вертикальному центру?
     
Статус темы:
Закрыта.