web-dev-qa-db-ja.com

CSS：固定サイズのdivがわからない場合にdivを垂直に整列

<div>は、CSSを使用して画像（またはフラッシュ）を垂直に含みます。高さと幅は動的です。

htmlcssvertical-alignment
45
Oleg Tarasenko

これは、コンテナまたは子の既知のサイズなしで水平および垂直にセンタリングするための純粋なCSS2ソリューションです。ハッキングは関係ありません。 this answer で発見し、 this answer でもデモしました。

解決策 は、vertical-align: middleと、line-height: 0に基づいています。この親は、行の高さが固定されています。

HTML：

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="" />
    </span>
</span>

そしてCSS：

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

IE8、IE9のWin7でテスト済みOpera 11.51、Safari 5.0.5、FF 6.0、Chrome 13.0。

唯一の注意点はIE7で、これについては このフィドルで のように、最も内側の2つの要素を1行で宣言する必要があります。

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

IE7にはスパンも必要であることに注意してください。他のすべてのブラウザーでは、スパンはdivの場合があります。

45
NGLN

これを行うには、インラインブロックを使用します。インラインブロックにはheight: 100%（およびHTMLとBODYの同じ高さ）とvertical-align: middle。

例1： http://jsfiddle.net/kizu/TQX9b/ （多くのコンテンツなので、全幅です）

例2： http://jsfiddle.net/kizu/TQX9b/2/ （任意のサイズの画像）

この例ではspansを使用しているため、IEでハッキングせずに動作します。divsを使用する場合は、Conditionalを追加することを忘れないでくださいIE .helper, .content { display: inline; zoom: 1; }、したがって、インラインブロックはブロック要素に対して機能します。

12
kizu

ここでの他の回答に加えて、 CSS3フレキシブルボックスモデル を使用すると、これを実現できます。

必要なコンテナ要素は1つだけです。内部のすべては、柔軟なボックスモデルルールに従ってレイアウトされます。

<div class="container">
    <img src="/logo.png"/>
</div>

CSSは実際には非常に単純です。

.container { 
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

簡潔にするために、ベンダープレフィックスルールを省略しました。

これは、imgが常にページの中央にあるデモです。 http://jsfiddle.net/zn8bm/

Flexboxは駆け出しの仕様であり、現在Safariでのみ実装されています。ChromeおよびFirefox 4+。

8
Chris

ブルーノによるこのソリューションをお勧めします： http://www.brunildo.org/test/img_center.html

しかし、彼のソリューションw/r/t webkitで問題に遭遇しました。空のdivが許可されている場合、webkitはspanの上部に小さなスペースをレンダリングしていたようです。だから、私のソリューションでは、ブラウザがIE（スペースを取り除く方法を見つけたなら、教えてください！）最終的には：

HTML：

<div class="outerdiv">
    <img src="..." /> 
</div>

CSS：

.outerdiv {
    display: table-cell;
    width: 200px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
}
.ie_vertical_align * {
    vertical-align: middle;
}
.ie_vertical_align span {
    display: inline-block;
    height: 150px;
    width: 0;
}

ブラウザがIEであることが検出された場合、imgタグとcssスタイルの前に空のspan要素を追加して、次のようにします。

<div class="outerdiv ie_vertical_align">
    <span></span>
    <img src="..." /> 
</div>

このコードでは JSFiddle があります。

4
rcl

チェコのWeb開発者であるDušanJanovskýは、しばらく前にクロスブラウザソリューションを公開しました。読む http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

2
duri

IE7以前を気にしない場合は、複数のネストされたdivを使用する必要はありません。垂直に配置したいdivがある場合、そのdivはいくつかのコンテナー内にあります（コンテナーが<body>であっても）。したがって、コンテナでdisplay: table-cellとvertical-align: middleを指定すると、divが垂直方向の中央に配置されます。

ただし、IE7以前を気にする場合は、それを機能させるために追加のコンテナーが必要になります（はい、ハッキングによって）。

this fiddle を見てください。 IE6-9およびその他の主要なブラウザーで正しく表示されます。 #container2はIE7以下にのみ存在するため、気にしない場合はIE固有の条件付きスタイルと同様に削除できます。

1
Artyom

50％パディングトリックを試してください。

<html>

<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line; 
     text-align:center; vertical-align:bottom; 
     padding: 50% 0 50% 0">test</div>
</body>

</html>
0
RetroCoder

画像をdivの背景として設定し、中央に揃えます

0
Benjamin Udink ten Cate