Html 为什么宽度：100% 不适用于 div {display: table-cell}？

Question

提问by timshutes

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.

我正在尝试垂直和水平居中覆盖图像幻灯片（flexslider）的一些内容。有一些与此类似的问题，但我找不到直接适用于我的特定问题的令人满意的解决方案。由于 FlexSlider 的限制，我无法position: absolute;在我的实现中使用img 标签。

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

我几乎有以下解决方法。唯一的问题是我无法获得宽度和高度声明以inner-wrapper使用该display: table-cell属性处理div 。

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%;
}

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

注意：居中的内容将超过 1 个元素，所以我不能使用行高技巧。

jsFiddle.

js小提琴。

Answer 1

回答by woojoo666

Putting display:table;inside .outer-wrapperseemed to work...

把display:table;里面.outer-wrapper似乎工作...

JSFiddle Link

JSFiddle 链接

EDIT: Two Wrappers Using Display Table Cell

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

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

我会对你的回答发表评论，但我的代表太少了 :( 反正...

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-wrapperwhole-heartedly.

离开你的答案，似乎你需要做的就是在display:table;里面添加.outer-wrapper（Dejavu？），你可以table-wrapper全心全意地摆脱。

JSFiddle

But yeah, the position:absolutelets you place the divover the img, I read too quickly and thought that you couldn't use position:absoluteat all, but seems like you figured it out already. Props!

但是，是的position:absolute，您可以放置div在img，我读得很快，并认为你不能使用position:absolute所有，但好像你理解了它了。道具！

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

我不打算发布源代码，毕竟 99% timshutes 的工作，所以请参考他的回答，或者只是使用我的 jsfiddle 链接

Update: One Wrapper Using Flexbox

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

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

已经有一段时间了，所有很酷的孩子都在使用 flexbox：

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

Full JSFiddle Solution

完整的 JSFiddle 解决方案

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

浏览器支持（来源）：IE 11+、FireFox 42+、Chrome 46+、Safari 8+、iOS 8.4+（-webkit-前缀）、Android 4.1+（-webkit-前缀）

CSS Tricks: a Guide to Flexbox

CSS 技巧：Flexbox 指南

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!

如何在 CSS中居中：输入您希望内容如何居中，并输出如何在 html 和 css 中进行居中。未来已来！

Answer 2

回答by timshutes

I figured this one out. I know this will help someone someday.

我想通了这一点。我知道有一天这会对某人有所帮助。

How to Vertically & Horizontally Center a Div Over a Relatively Positioned Image

如何在相对定位的图像上垂直和水平居中 Div

The key was a 3rd wrapper. I would vote up any answer that uses less wrappers.

关键是第三个包装器。我会投票支持任何使用较少包装的答案。

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

You can see the working jsFiddlehere.

您可以在此处查看正在运行的jsFiddle。

Answer 3

回答by user7508996

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:

我发现'width'的值越高，盒子的宽度就越小，反之亦然。我发现了这一点，因为我之前遇到了同样的问题。所以：

.inner-wrapper {
    width: 1%;
}

solves the problem.

解决了这个问题。

Answer 4

回答by caramba

Welcome to 2017these days will using vWand vHdo the trick

欢迎来到 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>

Answer 5

回答by Derzu

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:

您的 100% 意味着 100% 的视口，除了宽度的 % 单位之外，您还可以使用 vw 单位来修复它。问题是 100vw 与视口有关，除了 % 与父标签有关。这样做：

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

Answer 6

回答by Hushme

How about this? (jsFiddle link)

这个怎么样？（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;
}

Answer 7

回答by Cardinale

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

只需添加 min-height:100% 和 min-width:100% 就可以了。我有同样的问题。你不需要第三个包装器

Html 为什么宽度：100% 不适用于 div {display: table-cell}？

提问by timshutes

回答by woojoo666

回答by timshutes

回答by user7508996

回答by caramba

回答by Derzu

回答by Hushme

回答by Cardinale

相关推荐

最近更新

标签

Html 为什么宽度：100% 不适用于 div {display: table-cell}？

提问by timshutes

回答by woojoo666

回答by timshutes

回答by user7508996

回答by caramba

回答by Derzu

回答by Hushme

回答by Cardinale

相关推荐

Html 整页 <iframe>

Html 创建全屏 iframe

Html 如何在html的新标签页中打开链接？

Html 为什么字体大小不会随着浏览器放大而改变？

相关推荐

最近更新

标签