width : 100 %가 div {display : table-cell}에서 작동하지 않는 이유는 무엇입니까?

width : 100 %가 div {display : table-cell}에서 작동하지 않는 이유는 무엇입니까?

---

이미지 슬라이드 (flexslider)를 오버레이하는 일부 콘텐츠를 수직 및 수평 중앙에 배치하려고합니다. 이 질문과 비슷한 질문이 있었지만 특정 문제에 직접 적용 할 수있는 만족스러운 해결책을 찾을 수 없었습니다. FlexSlider의 한계로 인해 position: absolute;구현시 img 태그에 사용할 수 없습니다 .

작업 아래에 거의 해결 방법이 있습니다. 유일한 문제는 속성을 inner-wrapper사용하여 div 에서 작동하도록 너비 및 높이 선언을 가져올 수 없다는 것 display: table-cell입니다.

이 표준 동작입니까, 아니면 코드에 누락 된 것이 있습니까? 표준 행동이라면 내 문제에 대한 최선의 해결책은 무엇입니까?

HTML

<ul>
    <li>
        <img src="#">
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <h1>My Title</h1>
                <h5>Subtitle</h5>
            </div>
        </div>
    </li>
</ul>

CSS

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

ul {
    background: #CCC;
    height: 100%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 410px;
}

.outer-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0; padding: 0;
}

.inner-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
}

참고 : 중앙에있는 콘텐츠는 두 개 이상의 요소이므로 줄 높이 트릭을 사용할 수 없습니다.

jsFiddle .

---

display:table;안에 넣는 .outer-wrapper것 같았는데 ...

JSFiddle 링크

---

편집 : 디스플레이 테이블 셀을 사용하는 두 개의 래퍼

나는 당신의 대답에 대해 언급 할 것이지만 나는 담당자가 너무 적습니다 :( 어쨌든 ...

당신의 대답 에서 벗어나 면 , 당신이해야 할 일은 display:table;안에 추가하는 것 같습니다 .outer-wrapper(Dejavu?), 당신은 table-wrapper전심으로 제거 할 수 있습니다 .

JSFiddle

하지만 네, 위에 position:absolute놓을 수 있습니다. 너무 빨리 읽고 전혀 사용할 수 없다고 생각 했지만 이미 알아 낸 것 같습니다. 소품!divimgposition:absolute

99 % timshutes의 모든 작업 후에 소스 코드를 게시하지 않을 것이므로 그의 답변을 참조하거나 내 jsfiddle 링크를 사용하십시오.

업데이트 : Flexbox를 사용하는 하나의 래퍼

오랜만이고 멋진 아이들은 모두 flexbox를 사용하고 있습니다.

<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
    stuff to be centered
</div>

완전한 JSFiddle 솔루션

브라우저 지원 ( 소스 ) : IE 11+, FireFox 42+, Chrome 46+, Safari 8+, iOS 8.4+ ( -webkit-접두사), Android 4.1+ ( -webkit-접두사)

CSS 트릭 : Flexbox 가이드

How to Center in CSS : 콘텐츠를 중앙에 배치하는 방법을 입력하고이를 수행하는 방법을 html 및 css로 출력합니다. 미래가 여기 있습니다!

---

나는 이것을 알아 냈다. 나는 이것이 언젠가 누군가를 도울 것이라는 것을 알고 있습니다.

상대적으로 배치 된 이미지에서 Div를 수직 및 수평 중앙에 배치하는 방법

열쇠는 세 번째 래퍼였습니다. 나는 더 적은 래퍼를 사용하는 답변에 투표 할 것입니다.

HTML

<div class="wrapper">
    <img src="my-slide.jpg">
    <div class="outer-wrapper">
        <div class="table-wrapper">
            <div class="table-cell-wrapper">
                <h1>My Title</h1>
                <p>Subtitle</p>
            </div>
        </div>
    </div>
</div>

CSS

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

ul {
    width: 100%;
    height: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 100%;
}

.outer-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  margin: 0; padding: 0;
}

.table-wrapper {
  width: 100%;
  height: 100%;
  display: table;
  vertical-align: middle;
  text-align: center;
}

.table-cell-wrapper {
  width: 100%;
  height: 100%;  
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

여기서 작동하는 jsFiddle을 볼 수 있습니다 .

---

I discovered that the higher the value of 'width' is, the smaller the box width is made and vice versa. I found this out because I had the same problem earlier. So:

.inner-wrapper {
    width: 1%;
}

solves the problem.

---

Welcome to 2017 these days will using vW and vH do the trick

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

ul {
    background: #CCC;
    height: 100%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 410px;
}

.outer-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0; padding: 0;
}

.inner-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100vw; /* only change is here "%" to "vw" ! */
    height: 100vh; /* only change is here "%" to "vh" ! */
}

<ul>
    <li>
        <img src="#">
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <h1>My Title</h1>
                <h5>Subtitle</h5>
            </div>
        </div>
    </li>
</ul>

---

Your 100% means 100% of the viewport, you can fix that using the vw unit besides the % unit at the width. The problem is that 100vw is related to the viewport, besides % is related to parent tag. Do like that:

.table-cell-wrapper {
    width: 100vw;
    height: 100%;  
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

---

How about this? (jsFiddle link)

CSS

ul {
    background: #CCC;
    height: 1000%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
    position: absolute;
}
li {
 background-color: #EBEBEB;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    display: table;
    height: 180px;
    overflow: hidden;
    width: 200px;
}
.divone{
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 100%; 

}
img {
    width: 100%;
    height: 410px;
}
.wrapper {
  position: absolute;
}

---

Just add min-height:100% and min-width:100% and it will work. I had the same problem. You don't need a 3th wrapper

참고URL : https://stackoverflow.com/questions/17736570/why-is-width-100-not-working-on-div-display-table-cell