web-dev-qa-db-ja.com

display：table-cellを使用せずにdivを別のdiv内に垂直に配置する方法

これが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/

*

jqueryhtmlcssvertical-alignment
12
MonsterMMORPG

追加のヘルパーを使用して、高さが固定されたブロックで垂直方向の位置合わせを行うことができます。

これを見てください： http://jsfiddle.net/kizu/7Fewx/

そこには、整列させたいブロックの近くにヘルパーが必要です。

.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

そして、display: inline-block; vertical-align: middle;を.DivWhichNeedToBeVerticallyAlignedに追加します

43
kizu

子divの高さを知らずに、CSSでこれを行う方法はありません。

JQueryを使用すると、次のようなことができます。

var parentHeight = $('#parent').height();
var childHeight = $('#child').height();
$('#child').css('margin-top', (parentHeight - childHeight) / 2);
11
timrwood

このソリューションは、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;
}
3
hemkaran_raghav

親に他の子がいない場合。これは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;}
3
Mohsen

私は次のソリューション（配置、テーブルセル/テーブル行、行の高さなし）を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>
0
Arsh

最新のブラウザの別のオプションは次のとおりです。

.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%);
}
0
Tom Sarduy