Почему 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%;
}

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

jsFiddle.

7 57
html css css-tables vertical-alignment flexslider

7 ответов:

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

JSFiddle Ссылке

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

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

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

JSFiddle

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

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

Обновление: Одна Обертка С Помощью Элемента

это было некоторое время, и все крутые дети используют 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. Будущее здесь!

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