CSSの垂直方向の整列

私は浮動小数点型のdivにimgを持っていますが、垂直に中心を合わせる方法はわかりません。CSSの垂直方向の整列

<div style="height: 300px"> 
    <img style="height: 50px" src="something" /> 
</div>

vertical-align：途中で途中で止まってしまいます。

http://jsfiddle.net/wKQYj/

出典

2011-01-24 anonymous

この記事で言及されている2つの方法は、別々の回答として既に与えられていますが、実際に使用された「vertical-align」が分かっていれば、より良いCSSerになります。http://phrogz.net/css/vertical-align/ – scragz

@scragz - これは良いリンクです。しかし、私は 'display：table-cell'を使用しません。もちろん、私は提案された答えを「

」としていません。 Ha。 – Jason

https://pbs.twimg.com/media/B2mW8NiCQAA6IIP.jpg – walv

答えて

：

<table> 
<tr> 
    <td style='height:300px; vertical-align:center'> 
    <img src='something'> 
    </td> 
</tr> 
</table>

か、imgの高さと幅を知って以来、：のようなものを試してみてください-elementので同様をテキストに振る舞い、あなたは簡単に設定することができ、親要素のheightにline-height：

div { 
    height: 300px; 
    line-height: 300px; 
}

JS Fiddle demo。

出典

2011-01-24 18:56:31

vertical-alignプロパティはtd要素に本当に良いです。垂直に整列親要素内のテキスト、およびimgがインラインであることを念頭に置く

<div style='height:300px;'> 
<img style='height:50px; position:relative; top:50%; margin-top:-25px'> 
</div>

出典

2011-01-24 18:53:47 Jason

ZOMG、上記のどれも私には大丈夫そうだ、私はCSSに深刻な穴があることを意味している。彼らは影などを展開している。 divsのdivsで縦に中央に...聖なる牛。 divを使用する必要があります。 divの高さはユーザーによって変更されるため、2番目のコードは使用できません。だから私は失われている。 – anonymous

@anonymous：JavaScriptやJSライブラリ（MooTools、Scriptaculous、jQuery、Glow ...）を使用できますか？ –

vertical-align CSSスタイルは、テキスト行内のテキストの配置を指定します。これにより、例えば上付き文字または下付き文字としてテキストを指定することができます。

実際には、ボックス内の要素を垂直に配置することは意図していません。

テーブルセル（つまり<td>と<th>要素）は、vertical-alignスタイルを使用してセル内のセルの内容を整列させます。

この例外は奇抜なものです。本当に存在してはいけません。 CSSデザイナーは、CSSをテーブル要素のvalign属性を再現できるようにするために、そこに配置しました。これは、テーブルベースのレイアウトの古きよき時代にデザイナーが一般的に使用していました。

他の要素については、ボックスの内容を真ん中に垂直に整列させるのはちょっとした芸術です。テキストの単一ライン用

単にボックス全体の高さと同じline-heightを行い、：いくつかの技術があります。おそらくこれにはvertical-alignは必要ないでしょう。
display:table-cell;を使用して、要素を表のセルとしてシミュレートし、次にvertical-alignを使用します。これは機能しますが、意図しない結果が生じることがあります（シミュレートしたくない表セルの他の属性があります）。あなたが垂直方向に整列する要素の高さを知っている場合
、あなたはこのように、50％マイナスの半分の高さにそれを配置することができます。
```
position:absolute; 
top:50%; 
height:200px; 
margin-top:-100px; /* half the height */ 
```

いくつか他の人がありますが、しかし、これらはあなたを始めるはずです。

希望に役立ちます。

出典

2011-01-24 19:06:49 Spudley

JavaScriptを使用すると、すべてのケースで縦方向の中央に画像を配置するのが最適です。 jQueryのようなライブラリを使うことができれば、それはほんの数行のコードです。

$(function(){ 
    var containerHeight = $('#container').outerHeight(); 
    var imgHeight = $('#logo img').outerHeight(); 

    var difference = (containerHeight - imgHeight)/2; 
    $('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});

}）;

出典

2011-01-24 19:12:23 heymrcarter

だから彼は完全なjQueryライブラリとこのスクリプトを含める必要がありますか？ちょうど何かを中心にするためにちょっと残酷に見えます。 – Jason

もし数回以上何かを集中させなければならないと、A）親のdivの高さは何か、そしてB）画像の高さは分かっていなければ、これはいつでもうまくいくでしょうcase – heymrcarter

テーブルを使用しない最新の（IE8 +）ソリューションでは、this oneが最高です。

<style> 
/* Can be any width and height */ 
.block { 
    height:500px; 
    text-align: center; 
} 

/* The ghost, nudged to maintain perfect centering */ 
.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can be any width or height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
} 
</style> 

<div class="block"><div class="centered">Centered Content</div></div>

出典

2013-03-08 22:38:07 Justin

コンテンツの高さを知る必要はなく、table-cell CSSを使用しないので、実際のところベストソリューションです。共有ありがとう！ – Sygmoral

+1巧妙なトリック！これは、受け入れられた回答IMOでなければなりません。 – Passerby

には、.centeredをパーセント幅（実際には100％）としながら、これを行う方法があります。 –

プリティcool and modern approach（指定した高さ）：

.Absolute-Center { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

出典

2013-09-08 22:45:11 Agat

私は、ディスプレイを使用しています：ボックスのプロパティを：

#container { 
    display: box; 
    box-orient: vertical; 
    box-pack: center; 
} 

#text { 
    vertical-align: middle; 
}

は、ここではJS-フィドルを参照してください：verical align js-fiddle

出典

2014-11-03 10:13:38 Ruwen

を

translateプロパティを使用すると、それは簡単でIEでも機能します：

img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

出典

2015-02-05 22:50:09 yulie

非常に良いと短い方法！ありがとう！ –

答えて

関連する問題