web-dev-qa-db-ja.com

CSS：最大幅を制限しながら、流体div（px幅なし）を中央に配置するレスポンシブな方法は？

ブロック要素を中央に配置する方法について、100万の質問を見てきましたが、いくつかの一般的な方法がありますが、それらはすべて固定ピクセル幅に依存しています。次に、margin:0 autoまたは絶対/相対配置とleft:50%; margin-left:[-1/2 width];などを使用します。要素の幅が％に設定されている場合、これが機能しないことは周知の事実です。

本当に流動的な方法でこれを行う方法は本当にありませんか？私は、幅に%を使用することについて話している（notますます小さな固定幅で多数のメディアクエリを設定する）。

注意：バズワード「レスポンシブ」を使用するソリューションはたくさんありますが、do n't（とにかく固定幅を使用しているため）私の質問に答えてください。 例 です。

更新：私はほとんど忘れていました：中央に配置された要素の最大幅の制限をどのように処理し、それでも中央に保持しますか？ @smdragerの答えの下に私のコメントを参照してください。実際の例。ポップアップメッセージまたはテキストの段落を含むライトボックス効果をウィンドウの中央に表示し、テキストを幅に応じて滑らかに折り返したい。しかし、テキストボックスがテキストを読みにくくなるほど遠くに伸ばしたくありません（3つの段落が1行のテキストに引き伸ばされた4フィートの画面を想像してください）。ほとんどのアプローチにmax-widthを追加すると、max-widthに達すると中央のボックスが中央に移動しなくなります。

htmlcsshtml5css3responsive-design
26
emersonthis

水平および垂直の両方の中央揃え

実際には、高さと幅をパーセントで指定すると、中央揃えがさらに簡単になります。 divで占められていない領域の半分だけ、左と上をオフセットします。

したがって、身長が40％の場合、100％-40％= 60％です。したがって、上下に30％が必要です。次にトップ：30％がトリックを行います。

こちらの例をご覧ください： http://dabblet.com/Gist/5957545

水平方向のみのセンタリング

インラインブロックを使用します。ただし、ここでの他の答えは、IE 8以下では機能しません。そのためには、CSSハックまたは条件付きスタイルを使用する必要があります。ハックバージョンは次のとおりです。

こちらの例をご覧ください： http://dabblet.com/Gist/5957591

.inlineblock { 
    display: inline-block;
    zoom: 1;
    display*: inline; /* ie hack */
}

編集

メディアクエリを使用すると、2つの手法を組み合わせて、必要な効果を得ることができます。唯一の問題は身長です。ネストされたdivを使用して、％幅と

http://dabblet.com/Gist/5957676

@media (max-width: 1000px) {
    .center{}
    .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
    .center{left:50%;top:25%;position:absolute;}
    .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
42
smdrager

クリス・コイヤーの 幅の中央揃え 要素に関する記事から：

負のマージンを使用する代わりに、負のtranslate()変換を使用します。

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);

  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

Codepen

18
Brian Phillips

センタリングする要素でdisplay: inline-blockを使用し、その親でtext-align: center;を設定できると思います。これにより、すべての画面サイズでdivが確実に中央に配置されます。

ここでフィドルを見ることができます： http://jsfiddle.net/PwC4T/2/ 完全を期すためにここにコードを追加します。

HTML

<div id="container">
    <div id="main">
        <div id="somebackground">
            Hi
        </div>
    </div>
</div>

CSS

#container
{
    text-align: center;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align: left;
    background-color: red;
}

垂直方向のセンタリングについては、コードを完全に削減するdisplay: table;を優先して、一部の古いブラウザーのサポートを「ドロップ」しました。次のフィドルを参照してください。 http://jsfiddle.net/jFAjY/1/

完全を期すためのコードを次に示します。

HTML

<body>
    <div id="table-container">
        <div id="container">
            <div id="main">
                <div id="somebackground">
                    Hi
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body, html
{
    height: 100%;
}
#table-container
{
    display:    table;
    text-align: center;
    width:      100%;
    height:     100%;
}
#container
{
    display:        table-cell;
    vertical-align: middle;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align:       left;
    background-color: red;
}

このアプローチの利点は？ percantageを扱う必要はありません。また、2つの異なるサイズの<video>タグ（html5）を正しく処理します（ 1つは読み込み中、もう1つは読み込み後に、動画が読み込まれるまでタグサイズを取得できません）。

欠点は、古いブラウザのサポートを落とすことです（IE8はこれを正しく処理しないと思います）

12
Fire-Dragon-DoL

編集：
http://codepen.io/gcyrillus/pen/daCy そのため、ポップアップには、position：fixed、display：tableプロパティ、およびemまたはremを使用したmax-widthを使用する必要があります。値：）このCSSベースで：

#popup {
  position:fixed;
  width:100%;
  height:100%;
  display:table;
  pointer-events:none;
}
#popup > div {
  display:table-cell;
  vertical-align:middle;
}
#popup p {
  width:80%;
  max-width:20em;
  margin:auto;
  pointer-events:auto;
}
1
G-Cyr

これは本当に単純に聞こえるかもしれません...

ただし、これによりdivはdivの中央、左右のマージンまたは親コンテナーに対して正確に中央に配置されますが、左右で対称的にパーセンテージを調整できます。

margin-right: 10%;
margin-left: 10%;

次に、％を調整して、希望する幅に調整します。

0
Bruno Vincent

このようなものはそれかもしれませんか？

HTML

 <div class="random">
        SOMETHING
 </div>

CSS

body{

    text-align: center;
}

.random{

    width: 60%;
    margin: auto;
    background-color: yellow;
    display:block;

}

デモ： http://jsfiddle.net/t5Pp2/2/

編集：display:blockを追加しても問題はありません。

余白をmargin: 0 auto 0 auto;に設定することもできます。これは、上からではなくこの方法でのみ中央に配置されるようにするためです。

0
Ms. Nobody