为什么width：100％不能在div {display：table-cell}上工作？ [英] Why is width: 100% not working on div {display: table-cell}?

问题描述

我正在尝试垂直和水平居中覆盖图片幻灯片（flexslider）的一些内容。有一些类似的问题，这个，但我找不到一个令人满意的解决方案，直接应用于我的具体问题。由于FlexSlider的限制，我不能在我的实现中使用img标签上的 position：absolute; 。

I'm trying to vertically and horizontally center some content overlaying an image slide (flexslider). There were some similar questions to this one, but I couldn't find a satisfactory solution that applied directly to my specific problem. Because of the limitations of FlexSlider, I cannot use position: absolute; on the img tag in my implementation.

我几乎有解决方法下面工作。唯一的问题是我不能得到宽度&高度声明以使用 display：table-cell 属性在 inner-wrapper

I almost have workaround below working. The only problem is I cannot get the width & height declarations to work on inner-wrapper div with the display: table-cell property.

这是标准行为，还是我的代码缺少某些东西？如果是标准行为，我的问题的最佳解决方案是什么？

Is this standard behavior, or am I missing something with my code? If it's standard behavior, what's the best solution to my problem?

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个元素， t使用行高技巧。

Note: the centered content will be more than 1 element, so I can't use the line-height trick.

jsFiddle 。

推荐答案

将 display：table; .outer-wrapper 似乎工作...

Putting display:table; inside .outer-wrapper seemed to work...

JSFiddle链接

编辑：两个包装器使用显示表格单元

我会对你的答案发表评论，但我的反驳太少了：

I would comment on your answer but i have too little rep :( anyways...

关闭您的答案，似乎所有您需要做的是添加 display：table; 在 .outer-wrapper （Dejavu？），你可以摆脱 table-wrapper -heartedly。

Going off your answer, seems like all you need to do is add display:table; inside .outer-wrapper (Dejavu?), and you can get rid of table-wrapper whole-heartedly.

JSFiddle

但是， position：absolute 可以放置 div 在 img ，我读得太快，认为你不能使用 position：absolute ，但似乎像你想象的已经。 Props！

But yeah, the position:absolute lets you place the div over the img, I read too quickly and thought that you couldn't use position:absolute at all, but seems like you figured it out already. Props!

我不会发布源代码，所有的99％timshutes的工作后，所以请参考他的答案，或者只是使用我的jsfiddle链接

I'm not going to post the source code, after all its 99% timshutes's work, so please refer to his answer, or just use my jsfiddle link

更新：使用Flexbox的一个包装器

酷孩子使用flexbox：

It's been a while, and all the cool kids are using flexbox:

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

完整的JSFiddle解决方案

浏览器支持（ source ）：Android 11+，FireFox 42+，Chrome 46+，Safari 8+，iOS 8.4+（ -webkit - +（ -webkit - 前缀）

Browser Support (source): IE 11+, FireFox 42+, Chrome 46+, Safari 8+, iOS 8.4+ (-webkit- prefix), Android 4.1+ (-webkit- prefix)

CSS技巧：Flexbox指南

如何在CSS中心：输入您希望您的内容如何居中，并输出如何在html和css中做它。未来就在这里！

How to Center in CSS: input how you want your content to be centered, and it outputs how to do it in html and css. The future is here!

这篇关于为什么width：100％不能在div {display：table-cell}上工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！