Почему width: 100% не работает на div {display: table-cell}?

Я пытаюсь вертикально и горизонтально центрировать некоторый контент, накладывающий слайд изображения (flexslider). Были некоторые подобные вопросы, но я не мог найти удовлетворительного решения, которое применялось бы непосредственно к моей конкретной проблеме. Из-за ограничений FlexSlider, я не могу использовать position: absolute; в теге img В моей реализации.

у меня почти есть обходной путь ниже работы. Единственная проблема в том, что я не могу заставить объявления width & height работать на 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%;
}

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

jsFiddle.

57
css css-tables flexslider html vertical-alignment

7 ответов

положить display:table; внутри .outer-wrapper казалось, работали...

JSFiddle Ссылке

EDIT: две обертки с использованием ячейки таблицы отображения

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

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

JSFiddle

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

я не собираюсь публиковать исходный код, после всей его работы 99% timshutes, поэтому, пожалуйста, обратитесь к его ответу или просто используйте мою ссылку jsfiddle

Update: Одна Обертка С Использованием 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 Tricks: Руководство по Flexbox

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

64

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

как вертикально и горизонтально центрировать Div над относительно расположенным изображением

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

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 здесь.

12

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

.inner-wrapper {
    width: 1%;
}

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

5

Добро пожаловать в 2017 в эти дни, используя 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>
5

Ваш 100% означает 100% окна просмотра, вы можете исправить это, используя блок vw, кроме блока % по ширине. Проблема в том, что 100vw связано с видовым окном, кроме того, % связано с родительским тегом. Сделай так:

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

Как насчет этого? (jsFiddle ссылку)

в 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;
}
0

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

-1