html - CSS: を親要素の中央に配置する方法

Question

リンクは次のとおりです。 http://www.cssdesk.com/PYBRZ

助けてください、その要素（またはサイズが異なる要素）を親要素の中央に配置することはできません。私はこれを2日間考えてきましたが、まだこの問題を解決する方法を見つけることができません.

更新されたリンクは次のとおりです: http://www.cssdesk.com/W3MvQ

それでも、それ自体を中央に配置することはなく、中央に移動するだけです:(

score 1 · Accepted Answer

OP は、中央に垂直に配置することを意味します。この回答は 2 つに分かれていることに注意してください。

必要なものはちょっとトリッキーです。マージントップ、パディングトップ、または絶対位置の上と左の値を適用するには、親の高さを知る必要があります。

たとえば、これを見てください：

#overlay {

  background: black;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 700px;
  z-index:1000;
  text-align:center;


}

#overlay img {
  margin-top:100px
}

JavaScript を使用すると、親の高さを動的に検出できるため、それに応じて子にスタイルを適用できます。

親のサイズを指定せずに特定のパディングを追加することもできます。その場合、親は子のサイズにパディングを加えたサイズになります。

 #overlay {

      background: black;
      position: fixed;
      top:0;
      left:0;
      z-index:1000;
      padding:80px;


    }

    #overlay img {
       /*nothing in here unless you need any other style*/

    }

最初の答え **

親にスタイルを与える方法はたくさんありますtext-align:center

#overlay {
  display: table;
  background: black;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index:1000;
  text-align:center;
}

または、特定の with および margin auto を使用して画像をブロックに変換します。

#overlay img {


  display:block;
  width:100px;
  margin:auto


}

画像のデフォルトはインラインブロックであり、テキストとして機能します。これが、テキストを親に中央揃えする理由です。一方、特定のwithとmargin autoを使用してブロックにすると、それが保証されますはテキストとして扱われず、すべてのブラウザで中央に配置されます。

サイズが異なり、幅を指定できないため、例で次の作業を行うだけで、試してください。

#overlay img {

  display: block;
  margin:auto;

}

score 1 · Accepted Answer

次の CSS を試すことができます。

html, body {
    height: 100%;
    width: 100%;
}

#overlay {
    position:relative;
    background: black;
    width: 100%;
    height: 100%;
}

#overlay img {
    position:absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    margin: auto;
    outline: 1px dotted yellow;
}

次の jsFiddle を見てください: http://jsfiddle.net/audetwebdesign/UwJZw/

仕組み

position: relative親コンテナー ( ) に設定#overlayし、幅を 100%、高さを 100% に設定します。高さを機能させるには、高さをルート要素 ( <html>) および<body>100% に設定する必要があることに注意してください。

トリックは、<img>絶対に配置し、上/下/左/右の位置をゼロに設定してから、マージンを自動に設定することです。これにより、水平方向と垂直方向の両方が中央に配置されます。

おまけに、これは画像のサイズに関係なく機能し、計算は必要ありません。

黄色のアウトラインを追加して、画像の端を表示しましたが、これはソリューションには影響しません。

使用中のブラウザークロームの量によっては、100% の高さで垂直スクロールバーがトリガーされる場合があることに注意してください。ページレイアウトの残りの部分を考慮して、それを中心にどのように設計するのが最善かを考える必要があります。

一方、高さを固定したコンテナを使用している場合、これは特にフォトギャラリーなどでは魅力的に機能します。

この手法は CSS 2.1 に基づいているため、かなりの数のブラウザーで機能するはずです。

score 1 · Accepted Answer

margin:auto画像を横中央揃えにします。

.overlay img
{
   display: block; 
   margin-left: auto; 
   margin-right: auto; 
}

これは、画像のセンタリングの W3C 標準からのものです。これを参照してください http://www.w3.org/Style/Examples/007/center.en.html

div の位置が固定されているため、垂直方向の配置は簡単ではありません。代わりに、背景を div に移動できます

background:url("http://oi46.tinypic.com/56612.jpg") no-repeat center center

これを試してください:- http://www.cssdesk.com/nSyPa

<div id="overlay">

</div>


#overlay {
  background: black url('http://oi46.tinypic.com/56612.jpg') no-repeat center center;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index:1000;
  text-align: center;
}

画像のマージントップを使用することもできますが、それはメンテナンスの頭痛の種になり、さまざまな解像度などに基づいてマージンを計算する必要があります.

html - CSS: を親要素の中央に配置する方法

3 に答える 3

Related

Reference