Вертикальное центрирование с помощью таблиц - PullRequest
Новая
       23

Вертикальное центрирование с помощью таблиц

0 голосов
/ 04 февраля 2011

У меня есть iframe и div внутри контейнера.Два из них должны быть вертикально центрированы.Прочитав несколько постов в таблицах по центру, я попробовал, но безрезультатно.Iframe продолжает придерживаться верхней левой границы, даже если у меня установлено свойство отображения 'iframe' для 'table-cell' и 'vertical-align' для 'middle'.

HTML-код: 

<!-- the container div -->
<div id="iframe_r_container">

<!-- iframe -->
            <iframe id="iframing" src="mannequin.html" frameborder="0" ></iframe>

<!--div-->      <div id="right_container">
                <div id="user_credit">
                    <h1><a href="#">Username</a></h1><br />
                     has <span id="credits">20,000</span> credits.
                </div>

                <div> <button id="template_button"><img src="images/Coutallure-WebApp/template_button.png" /><span>Templates</span></button> </div>
            </div>

И вот CSS: 

/* START OF IFRAME_R_CONTAINER */
#iframe_r_container {
    position: absolute;
    display: table;
    top: 48px;
    bottom: 38px;
    width: 960px;   
}

/* START OF IFRAME */
#iframing {
    display: table-cell;
    width: 640px;
    height: 480px;
    vertical-align: middle;
}
/* END OF IFRAME */


/* START OF RIGHT CONTAINER */
#right_container {
        display: table-cell;
        vertical-align: middle;
    width: 113px;
    margin: 20px;
}

Я застрял в этом на полдня сегодня, поэтому любая помощь будет безмерно признательна.

Ответы [ 4 ]

1 голос
/ 04 февраля 2011

Если вы не возражаете против использования другой техники, кроме центрирования ячеек таблицы, вы можете попробовать что-то вроде этого: 

#iframe_r_container {
    position: absolute;
    top: 48px;
    bottom: 38px;
    width: 960px;
}

/* START OF IFRAME */
#iframing {
    position: relative;
    top: 50%;
    margin-top: -240px;
    width: 640px;
    height: 480px;
    float: left;
}
/* END OF IFRAME */


/* START OF RIGHT CONTAINER */
#right_container {
    position: relative;
    top: 50%;
    height: 113px;
    margin-top: -57px;
    margin-left: 670px;
    width: 113px;

}

Это работает здесь на моем FF / mac, но вам придется протестировать егов другом браузере.

Чтобы отцентрировать #right_container, вам нужно было бы задать ему высоту (здесь 113px) и соответственно установить отрицательную верхнюю границу.

Также вы можете указатьминимальная высота: от 640 пикселей до #iframe_r_container, чтобы избежать переполнения iframe за пределами его контейнера.

1 голос
/ 04 февраля 2011

Добавление «высоты» в ваши контейнеры должно сделать это. Просто добавив его в свой контейнер iframe, я работал в FF на моем Mac. 

#iframe_r_container {
    position: absolute;
    top: 48px;
    bottom: 38px;
    width: 960px;
    height:480px;   
}

(Примечание: Internet Explorer 8 (и выше) поддерживает значения свойств "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column" , "таблица-столбец-группа", "таблица-строка", "таблица-строка-группа" и "наследовать", только если указан! DOCTYPE.)

1 голос
/ 04 февраля 2011

Я не уверен, чего вы пытаетесь достичь, но просто прочитав ваше сообщение - вы не можете попробовать центрировать сам элемент с некоторым свойством выравнивания, это должно быть свойством его родительского элемента.Вы должны попробовать это поле, я думаю, что это подходящее свойство для работы.

0 голосов
/ 04 февраля 2011

попробуйте эти настройки: 

/* START OF IFRAME_R_CONTAINER */
#iframe_r_container {
    position: absolute;
    top: 48px;
    bottom: 38px;
    width: 960px;   
}

/* START OF IFRAME */
#iframing {
    width: 640px;
    height: 480px;
    margin: 0 auto;
}
/* END OF IFRAME */


/* START OF RIGHT CONTAINER */
#right_container {
    vertical-align: middle;
    width: 113px;
    margin: 0 auto;
}

Атрибут margin: 0 auto; будет (надеюсь) центрировать ваш iframe и другие элементы div внутри контейнера. Не проверено, но попробуйте.

...