Невозможно определить высоту или ширину DIv, установленного для отображения: table-cell - PullRequest
Новая
       20

Невозможно определить высоту или ширину DIv, установленного для отображения: table-cell

3 голосов
/ 04 апреля 2011

У меня есть div, завернутый в другой div.Родительский div установлен на:

Отображение: таблица

Дочерний div установлен на

div: table-cell

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

Я загрузил скриншот, чтобы показать вам, что я имею в виду.

Вот почему мне нужно определить высоту и ширину моего div-таблицы.Он должен вписываться в этот круг.

Я в недоумении, почему я не могу установить высоту или ширину этой ячейки таблицы.Мне также нужно делать это в CSS, а не в jquery, так как это будет первое, что увидят люди при загрузке страницы, и на целевой странице будет много контента.

Я положилкод здесь: http://jsfiddle.net/Kpr9k/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Div as Table-Cell Width/Height Mystery</title>
<style type="text/css">

body, html {
width:100%;
height: 100%; 
background-color: gray;
margin: 0;
padding: 0;
}

#myTable {
margin: 0;
display: table;
width: 100%;
height: 100%;
border: 1px red solid;
}

#myCell {
display: table-cell;
max-height: 500px;
max-width: 500px;
min-height: 500px;
min-width: 500px;
height: 500px;
width: 500px;
text-align: center;
color: #000000;
line-height: 36px;
vertical-align: middle;
border: 1px yellow solid;
}

</style>
</head>

<body>
<div id="myTable">
    <div id="myCell">I cannot define the width of a table cell and its driving me insane! The yellow border is the table-cell, however its been defined to be (min, max AND regular!!) as a 500px square.Instead, it's just defaulting to be 100%.</div>
</div>
</body>

</html>

table-cell-quandry

Ответы [ 2 ]

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

Вот ответ:

Я удивлен, насколько это было сложно, у кого-нибудь есть лучшее решение?

http://jsfiddle.net/2Z2BF/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Browser Centred Div Overlay - WITH Specified Width and Height</title>
<style type="text/css">

html,body{
    height:100%;
    margin:0;
    padding:0;
}

#stopTheOverlayFromAffectingTheContent {
    position: absolute;
    width: 100%;
    height: 100%;
}

#verticalFix{
    height:50%;
    margin-top:-250px;
    width:100%;
}

#horizontalFix {
    width:500px;
    height:500px;
    margin-left:auto;
    margin-right:auto;
}

#myTable {
    background-color: aqua;
    display: table;
    width: 100%;
    height: 100%
}

#myCell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#contentBelow {
    height:3000px;
}

h1 {color:#fff;margin:0;padding:0}
</style>
</head>

<body>
    <div id="stopTheOverlayFromAffectingTheContent">
        <div id="verticalFix"></div> 
        <div id="horizontalFix"> 
            <div id="myTable">
                <div id="myCell">Lorem Ipsum</div>
            </div>
        </div>
    </div>
<div id="contentBelow">DEVIL</div>
</body>    
</html>
1 голос
/ 04 апреля 2011

Я думаю, что поведение display: table-cell; заключается в заполнении любого display: table; родителя.

EDIT:

Подтвердил это, перебирая код в jsfiddle.

Я предлагаю вам использовать абсолютное позиционирование для центрирования контейнера div на странице и использовать display: table-cell; на внутреннем div для получения вашего вертикального выравнивания.

...