浮動小数点divの内部で垂直方向にimgを整列する

浮動小数点数divは、高さがdocument高さの100％まで伸びています.Javascriptを使用しています。 5つはすべてimg要素を含んでいます。浮動小数点divの内部で垂直方向にimgを整列する

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<link type="text/css" rel="stylesheet" href="style.css"/> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="static"><img src="http://www.rs.dhamma.org/wheel.gif"/></div> 
     <div><img src="http://www.rs.dhamma.org/wheel.gif"/></div> 
     <div><img src="http://www.rs.dhamma.org/wheel.gif"/></div> 
     <div><img src="http://www.rs.dhamma.org/wheel.gif"/></div> 
     <div class="clear"><img src="http://www.rs.dhamma.org/wheel.gif"/></div> 
    </div> 
</body> 
</html>

Javascriptを：

//sets columns height to 100%; 
function colsHeight(){ 
     var docHeight = $(document).height(); 
     $("#wrapper div").height(docHeight); 
}; 

$(document).ready(function(){ 
    colsHeight(); 
    });

とCSS：私は親のdivdisplay: tableとimgdisplay: table-cell, vertical-align: middleが、運を設定しようとしました

*{ 
    margin: 0; 
    padding: 0;  
    } 

#wrapper{ 
width: 1000px; 
margin: 0 auto;  
    } 

    #wrapper div{  
     padding: 0 20px; 
     background-color: #9F81F7;   
     float: left; 
     border-right: 1px solid black; 
    } 
    #wrapper img{ 

    } 

div.clear:after{ 
    content: " "; 
    clear: both; 
    }

。 margin-top: 50%を定義することは何も期待していません。

JSFIDDLE HERE!!!

すべてのヘルプ高く評価しました。
ありがとうございます！

出典

2012-02-14 daniel.tosaba

なぜdisplay：inline-block;浮動小数点の代わりに？次に、あなたの心の中身を縦に並べて使うことができます。 – joshnh

既に試してみましたが、成功しませんでした。私のJSFIDDLEを編集してみてください。ありがとう –

また、 'display：inline-block;'を使用する予定がある場合は、 '＃wrapper div 'の間にスペースを入れてはいけません。 _ _つまり、1行にまたはインデントなしですべて – Hawken

これらは絶対に配置してから、top: 50%とmargin-top: -63pxと設定します。もちろん、これは画像の高さを知っている場合にのみ機能します（あなたの場合は126px）。画像サイズが動的である場合は、読み込み後にjsを使用して画像上の余白部分を設定するのが最も簡単で楽しいです。

とにかく、静的メソッドはここで見ることができます：http://jsfiddle.net/3gqcS/2/

出典

2012-02-14 04:49:03

これは私に最も合っています！みんなありがとう！ –

、列を設定してみてください：

position:relative; 
    width:<width>;/* width must be set */

となどの画像：完璧その後、しかし、それらを中心にすべきである

position:absolute; 
    top:0; 
    bottom:0; 
    margin:auto 0;

絶対位置を指定したイメージがスペースを全く取らないため、列幅を設定する必要があります。

また、代わりにJavaスクリプトを使用するだけで追加します。

html, body, #wrapper, #wrapper div{height:100%;}

代わりに。

から学んだ

：あなたはJavaScriptとjQueryのを（彼なしでは生きていけない）あなたが行うことができます使用しているのでhttp://www.tutwow.com/htmlcss/quick-tip-css-100-height/

出典

2012-02-14 04:56:41 Hawken

それは動作しませんが、あなたの 'non-js-height-set-trick'が好きです。ありがとう！！！ –

あなたはどのブラウザを使用していますか、うまくいきませんか？ @ daniel.tosaba – Hawken

そのように整列させることはできません。しかし、ブラウザのトリックは素晴らしいです。最新のクロム＆ファイアフォックスを使用 –

....

チェックは、この：ここ

http://jsfiddle.net/828pW/はコードです：

function verticalAlignImage(img) 
{ 
    if(img.height) 
    { 

     $(img).css({ 
      position:'absolute', 
      top: ($(img).parent().height() - img.height)/2 
     }).parent().css('position', 'relative'); 

    } 
    else 
    { 
     setTimeout(function(){ 

      verticalAlignImage(img); 
     }, 100); 
    } 
}

出典

2012-02-14 04:58:47 ygaradon

ありがとうございました！ニースのJavascriptコード！誰があなたを教えた？乾杯！ –

これはちょっと汚れているようですが、divの行の高さをdivの高さ+画像の高さに設定してオーバーフローさせることができます：hidden

<div id="static" style="height: 481px; line-height: 607px; overflow: hidden;">

出典

2012-02-14 05:03:28 rikitikitik

それは厄介な小さなハックです、私はそれが好きです。ありがとう！！ –

浮動小数点divの内部で垂直方向にimgを整列する

答えて

関連する問題