Подтвердить что ты не робот

Почему ширина: 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.

4b9b3361

ОТВЕТЫ

Ответ 1

Помещение display:table; внутри .outer-wrapper казалось сработало...

ссылка JSFiddle

РЕДАКТИРОВАТЬ: две обертки с использованием ячейки таблицы отображения

Я бы прокомментировал ваш ответ, но у меня слишком мало репутации:( в любом случае...

Отключить ваш ответ, кажется, что все, что вам нужно сделать, это добавить display:table; внутри .outer-wrapper (Dejavu?), и вы можете избавиться от table-wrapper цельносердно.

JSFiddle

Но да, position:absolute позволяет помещать div поверх img, я читал слишком быстро и думал, что вы вообще не можете использовать position:absolute, но похоже, что вы уже поняли это. Реквизит!

Я не буду публиковать исходный код, поскольку все его 99% -ые тембраты работают, поэтому, пожалуйста, обратитесь к его ответу или просто используйте ссылку 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

Как создать центр в CSS: введите, как вы хотите, чтобы ваш контент был центрирован, и он выводит, как это сделать в html и css. Будущее здесь!

Ответ 2

Я понял это. Я знаю, это когда-нибудь поможет кому-нибудь.

Как вертикально и горизонтально центрировать 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.

Ответ 3

Я обнаружил, что чем выше значение "ширина", тем меньше ширина коробки и наоборот. Я нашел это, потому что раньше у меня была такая же проблема. Итак:

.inner-wrapper {
    width: 1%;
}

решает проблему.

Ответ 4

Как насчет этого? (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;
}

Ответ 5

Мне было страшно, что я должен использовать одно из этих решений, но просто используя vW и vH в эти дни сделают трюк...

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>

Ответ 6

Просто добавьте min-height: 100% и min-width: 100%, и он будет работать. У меня такая же проблема. Вам не нужна 3-я обертка