web-dev-qa-db-ja.com

div {display：table-cell}でwidth：100％が機能しないのはなぜですか？

画像スライド（flexslider）にオーバーレイするコンテンツを垂直方向および水平方向に中央に配置しようとしています。これに似た質問がいくつかありましたが、私の特定の問題に直接適用される満足のいく解決策を見つけることができませんでした。 FlexSliderの制限のため、実装のimgタグでposition: absolute;を使用することはできません。

私は仕事の下にほとんど回避策を持っています。唯一の問題は、inner-wrapperプロパティを持つdisplay: table-cell divで幅と高さの宣言を取得できないことです。

これは標準的な動作ですか、それともコードに何か不足していますか？それが標準的な動作である場合、私の問題に対する最善の解決策は何ですか？

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

注：中央のコンテンツは複数の要素になるため、行の高さのトリックは使用できません。

jsFiddle 。

htmlcssvertical-alignmentflexslidercss-tables
62
timshutes

display:table;を.outer-wrapperに入れるとうまくいくようです...

JSFiddle Link

編集：表示テーブルセルを使用する2つのラッパー

私はあなたの答えにコメントしますが、私は担当者が少なすぎます:(とにかく...

出発 あなたの答え 、あなたがする必要があるのはdisplay:table;（Dejavu？）の中に.outer-wrapperを追加するだけのようで、table-wrapper全体を取り除くことができます-心から。

JSFiddle

ええ、position:absoluteを使用すると、divをimgの上に配置できます。読み過ぎて、position:absoluteをまったく使用できないと思いましたが、すでにそれを理解しました。小道具！

ソースコードを投稿するつもりはありません。99％のティムシュートの仕事が終わったので、彼の答えを参照するか、自分のjsfiddleリンクを使用してください

更新：Flexboxを使用した1つのラッパー

しばらくして、すべてのクールな子供たちがフレックスボックスを使用しています：

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

完全なJSFiddleソリューション

ブラウザのサポート（ source ）：IE 11 +、FireFox 42 +、Chrome 46 +、Safari 8 +、iOS 8.4+（-webkit-プレフィックス）、Android 4.1+（-webkit-プレフィックス）

CSSの秘cks：Flexboxのガイド

CSSでのセンタリング方法 ：コンテンツをセンタリングする方法を入力し、それをHTMLおよびCSSで行う方法を出力します。未来はここにあります！

66
woojoo666

これを見つけました。私はこれがいつか誰かを助けることを知っています。

相対的な位置にある画像上で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
timshutes

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>
6
caramba

「幅」の値が大きいほど、ボックスの幅が小さくなり、逆もまた同様であることを発見しました。以前に同じ問題を抱えていたので、これを見つけました。そう：

.inner-wrapper {
    width: 1%;
}

問題を解決します。

6
user7508996

100％はビューポートの100％を意味します。幅の％単位のほかにvw単位を使用して修正できます。問題は、100vwがビューポートに関連し、％が親タグに関連していることです。そのようにします：

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

これはどうですか？（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
Hushme