Div 테이블 셀 세로 정렬이 작동하지 않음

Div 테이블 셀 세로 정렬이 작동하지 않음

---

DIV 및 표시 유형을 표 셀로 사용하여 텍스트를 가로 및 세로로 간단히 가운데에 배치하려고하지만 IE8 또는 Firefox에서 작동하지 않습니다.

아래는 내가 사용하고있는 CSS이며 그게 html 페이지에있는 전부입니다.

@charset "utf-8";
/* CSS Document */
html, body
{
    background-color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 5px;
}
div.Main
{
    background-color:#FFFFFF;
    border-collapse:collapse;
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
div.MainHeader
{
    color:#C00000;
    font-size:18pt;
    font-weight:bold;
    text-align:center;
    width:800px;
}
div.BlackBox
{
    background-color:#000000;
    color:#FFFF00;
    display:table-cell;
    float:left;
    font-size:18pt;
    font-weight:bold;
    height:191px;
    text-align:center;
    vertical-align:middle;
    width:630px;
}
div.BlackBoxPicture
{
    background-color:#000000;
    float:right;
    height:191px;
    margin-top:auto;
    margin-bottom:auto;
    text-align:right;
    vertical-align:bottom;
    width:170px;
}

내가 도대체 ​​뭘 잘못하고있는 겁니까?

---

table-cell부모 display:table요소 가 필요 하다고 생각 합니다 .

---

이것이 내가하는 방법입니다.

CSS :

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

HTML :

<div id="content">
    Content goes here
</div>

보다

수직 센터링의 예

과

CSS : 센터링 .

---

IE 6+에서 작동하는 방식으로 플로팅 요소를 수직으로 정렬 할 수 있습니다 . 전체 테이블 마크 업도 필요하지 않습니다. 이 방법은 완벽하게 깨끗하지 않습니다. 래퍼를 포함하고 컨테이너를 너무 많이 넘기는 텍스트가 너무 많은 경우에주의해야 할 사항이 몇 가지 있지만 꽤 좋습니다.

---

Short answer: You just need to apply display: table-cell to an element inside the floated element (table cells don't float), and use a fallback with position: absolute and top for old IE.

---

Long answer: Here's a jsfiddle showing the basics. The important stuff summarized (with a conditional comment adding an .old-ie class):

    .wrap {
        float: left;
        height: 100px; /* any fixed amount */
    }
    .wrap2 {
        height: inherit;
    }
    .content {
        display: table-cell;
        height: inherit;
        vertical-align: middle;
    }

    .old-ie .wrap{
        position: relative;
    }
    .old-ie .wrap2 {
        position: absolute;
        top: 50%;
    }
    .old-ie .content {
        position: relative;
        top: -50%;
        display: block;
    }

Here's a jsfiddle that deliberately highlight the minor faults with this method. Note how:

• In standards browsers, content that exceeds the height of the wrapper element stops centering and starts going down the page. This isn't a big problem (probably looks better than creeping up the page), and can be avoided by avoiding content that is too big (note that unless I've overlooked something, overflow methods like overflow: auto; don't seem to work)
• In old IE, the content element doesn't stretch to fill the available space - the height is the height of the content, not of the container.

Those are pretty minor limitations, but worth being aware of.

Code and idea adapted from here

---

An element styled as follows will be aligned vertically to middle:

.content{
     position:relative;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     top:50%;
}

However, the parent element must have a fixed height. See this fiddle: https://jsfiddle.net/15d0qfdg/12/

---

see this bin: http://jsbin.com/yacom/2/edit

should set parent element to

display:table-cell;
vertical-align:middle;
text-align:center;

---

In my case, I wanted to center in a parent container with position: absolute.

<div class="absolute-container">
    <div class="parent-container">
        <div class="centered-content">
            My content
        </div>
    </div>
</div>

I had to add some positioning for top, bottom, left & right.

.absolute-container {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

.parent-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}

.centered-content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

---

Because you still using float...

try to remove "float" and wrap it with display:table

example :

<div style="display:table">
 <div style="display:table-cell;vertical-align:middle;text-align:center">
       Hai i'm center here Lol
 </div>
</div>

---

Sometime floats brake the vertical align, is better to avoid them.

---

Set the height for the parent element.

---

Float it with another wrapper without using display: table;, it works:

<div style="float: right;">
   <div style="display: table-cell; vertical-align: middle; width: 50%; height: 50%;">I am vertically aligned on your right! ^^</div>
</div>

ReferenceURL : https://stackoverflow.com/questions/4005309/div-table-cell-vertical-align-not-working