69

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

私はほとんど以下の回避策を持っています。唯一の問題は、プロパティ を使用してinner-wrapperdiv で幅と高さの宣言を機能させることができないことです。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%;
}

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

jsFiddle .

4

7 に答える 7

78

display:table;中に入れるとうまくいくようでし.outer-wrapperた...

JSFiddle リンク

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

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

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

JSFiddle

でもええ、 はの上にposition:absolute置くことができます、私はあまりにも速く読みすぎて、あなたはまったく使用できないと思っていましたが、あなたはすでにそれを理解したようです. 小道具！divimgposition:absolute

99% timshutes の作業が終わった後、ソース コードを投稿するつもりはないので、彼の回答を参照するか、私の jsfiddle リンクを使用してください。

更新: Flexbox を使用する 1 つのラッパー

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

<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 でそれを行う方法が出力されます。未来はここにある！

于 2013-07-19T01:38:57.007 に答える
12

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

相対的に配置された画像の上に 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を確認できます。

于 2013-07-19T02:04:56.880 に答える
0

これはどう？(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;
}
于 2013-07-19T01:19:24.067 に答える
-3

min-height:100% と min-width:100% を追加するだけで機能します。私も同じ問題を抱えていました。3番目のラッパーは必要ありません

于 2015-05-05T17:03:24.177 に答える