これがdiv構造です。
<div class="DivParent">
<a href="#">
<div class="DivWhichNeedToBeVerticallyAligned"></div>
</a>
</div>
DivParentの幅と高さの値は固定されていますが、DivWhichNeedToBeVerticallyAlignedの高さの値は固定されていません。
DivParentをdisplay:table-cell;にした場合DivWhichNeedToBeVerticallyAlignedを垂直方向に揃えることはできますが、混乱を引き起こすため、この機能は使用したくありません。
HrefタグリンクはdivParentと同じサイズである必要があります。つまり、divparent全体がクリック可能である必要があります。 display:blockのように。
したがって、CSSで垂直方向に整列する方法や軽量のjqueryソリューションも役立ちますか?.
ありがとうございました。
ここでjsfiddle: http://jsfiddle.net/XHK2Z/
*
追加のヘルパーを使用して、高さが固定されたブロックで垂直方向の位置合わせを行うことができます。
これを見てください: http://jsfiddle.net/kizu/7Fewx/
そこには、整列させたいブロックの近くにヘルパーが必要です。
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
そして、display: inline-block; vertical-align: middle;
を.DivWhichNeedToBeVerticallyAligned
に追加します
子divの高さを知らずに、CSSでこれを行う方法はありません。
JQueryを使用すると、次のようなことができます。
var parentHeight = $('#parent').height();
var childHeight = $('#child').height();
$('#child').css('margin-top', (parentHeight - childHeight) / 2);
このソリューションは、IE 10以上を含む最新のブラウザーで問題なく機能します。
<div class="parent">
<div class="child">Content here</div>
</div>
このCSSを含む
.parent {
height: 700px;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width : 525px;
}
親に他の子がいない場合。これはCSSのみの「ハック」になります
DivParent{line-height:100px /*the div actual height*/ }
.DivWhichNeedToBeVerticallyAligned{display:inline-block}
別のハックは
DivParent{height:100px; position:relative}
.DivWhichNeedToBeVerticallyAligned{height:20px; position:absolute; top:50%; margin-top:-10px;}
私は次のソリューション(配置、テーブルセル/テーブル行、行の高さなし)を1年以上使用しており、IE 7および8同様に。
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
最新のブラウザの別のオプションは次のとおりです。
.child {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}