ITを表現する

我々はテーブルセル内の一部のコンテンツを合わせて、ページレイアウトを作成するために、CSSに対処しなければならなかった直前に子供の遊びだった。 単にケーキ、お好みのアライメントを持つようにテーブルの" 整列 "または"VALIGN"プロパティを設定！
CSSレイアウトでは、我々の要素に対して"のvertical-align"プロパティたけれども、それは" 整列 "または"VALIGN"プロパティのように単純ではないようです。 もっとspecifiicになる" のvertical-align"クロスブラウザのCSSの一部を書き込みしている場合は特に、あなたの問題のいずれかを解決するように思わなかった。

HTMLテーブルを使用せずに、オブジェクトを中心の問題は、画像またはコンテナ部門内のいくつかのテキストになり、おそらくいくつかの点ですべてのUI / CSSの開発者の悪夢であった。 この問題は、さらにオブジェクトを中央揃えする場合は、合わせてのお悩みは本質的に動的で外挿し、その高さが可変であるとき、すなわち（未知の高さ）。

我々が対処しなければならないブラウザの範囲にわたって動作します既知のまっすぐ解決策はありませんが、私が到着しようとしたことの解決策は私は（IE6、IE 7でそれをしようとしたこといくつかのブラウザで動作するように見えるん。 、FF）。

解決策：
Mozillaは、OperaやSafariなどのブラウザでは、奇妙な振る舞いプロパティは単に" テーブルセル "（表示：テーブルのセル）を含有する部門の" 表示 "プロパティを設定することによって、その感覚にさせることができる" のvertical-align" 。

問題は、まだ彼らはそれを無視して、まだそのまま" テーブルセル "プロパティと無知で何に理解していないようだ誰が、ブラウザのIEの家族と一緒に残ります。 物事が起こるようにするあなたのHTMLに簡単に、広告がさらにいくつかのDOM要素も、下記のソリューションを提供します。

CSSとHTMLは次のようになります。
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML： -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/>ビュー。<BR/>：3456 </ DIV>
</ DIV>
</ DIV>

結果は次のようになります： -

ここでデモを表示する | ダウンロードソースファイル （452回ダウンロード）

---

解決策を理解する：
テーブルやディスプレイ：ディスプレイを理解するブラウザ用のテーブルセルのプロパティには、ほとんどすべての説明を必要としません。 IEの場合は、使用するIE固有のハック（ ハッシュハック ）で、我々は絶対に使用可能な高さの半分でオブジェクトのコンテナ（obj_container）を配置します。 その後内でオブジェクト（obj）は 、比較的位置であり、その高さの半分だけ上に移動されてい...まあ！ 私はあなたの顔を理解するように見えるが、これは動作します。 お試しください！
上記の技術は私達に、上記のクロスブラウザの解決策を与えるために結合されます。

---

CSSは簡単に達成するために、以下のように変更することができます、 のvertical-align：topまたはのvertical-align：ボトム

TOPは、CSSを合わせ
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML： -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/>ビュー。<BR/>：1234 </ DIV>
</ DIV>
</ DIV>

結果は次のようになります： -

BOTTOMは、CSSを合わせ
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML： -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/>ビュー。<BR/>：1234 </ DIV>
</ DIV>
</ DIV>

結果は次のようになります： -

ここでデモを見る | ここからダウンロード

---

単に、マージン左を設定することにより、マージン、右マージンをautoにプロパティを使用して達成したオブジェクトの中心に水平方向の

私はこのアライメント問題に対する合理的な解決策を見つけることをしようとしていたので、年齢のように思える。 しかし、今、このソリューションで、私は少し平和に感じる。

そのいつか希望をもって

• CSSの垂直整列プロパティは、ブッシュの周りに多くを打つことなく、それは表のセルの内側にないように動作します
• 少なくとも、マージントップ：オートとマージン底：autoは、マージンと左マージン、右セットの自動への場合と同じ結果として得られます
• ブラウザ戦争はいつの日か以上になります。
• ALLのためだけのブラウザがあります。

ここで上記の溶液のCSSとHTMLをダウンロード （452回ダウンロード）..わかりやすさのために、CSSが最適化されていません

PS：ところで、それらは、私がクリックしたいくつかの写真のサムネイルは...