Why is width: 100% not working on div {display: table-cell}?
HtmlCssVertical AlignmentFlexsliderCss TablesHtml Problem Overview
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.
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%;
}
Note: the centered content will be more than 1 element, so I can't use the line-height trick.
Html Solutions
Solution 1 - Html
Putting display:table; inside .outer-wrapper seemed to work...
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-wrapper whole-heartedly.
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!
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
Update: One Wrapper Using 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>
Browser Support (source): IE 11+, FireFox 42+, Chrome 46+, Safari 8+, iOS 8.4+ (-webkit- prefix), Android 4.1+ (-webkit- prefix)
CSS Tricks: a Guide to 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!
Solution 2 - Html
I figured this one out. I know this will help someone someday.
How to Vertically & Horizontally Center a Div Over a Relatively Positioned Image
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 jsFiddle here.
Solution 3 - Html
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:
.inner-wrapper {
width: 1%;
}
solves the problem.
Solution 4 - Html
Welcome to 2017 these days will using vW and vH do the trick
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>
Solution 5 - Html
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:
.table-cell-wrapper {
width: 100vw;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Solution 6 - Html
How about this? (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;
}
Solution 7 - Html
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