0

私は、のような固定の高さの単純なDIVと、内側に個々の高さを持ついくつかの画像を持っています（それらの高さは外側のDIVの高さ以下です）：

<div>
  <img src="..">
  <img src="..">
  ...
</div>

このマークアップは現状のままであり、変更することはできません。すべての画像を並べて表示する必要があり、すべての画像はDIVの中央に垂直に配置する必要があります（したがって、画像ごとのパディングの上下は同じです）。

マークアップを変更せずにそれを行う方法は？さまざまな回答が、画像がDIV内に配置されるマークアップを扱っていますが、ここではそうではありません。

4

2 に答える 2

3

あなたの質問を読み直した後、<div>が少なくとも最高の画像と同じくらい高いということは、単にこれを行うだけです：

CSS

img {
    vertical-align: middle;
}​

ここで試してみてください: http://jsfiddle.net/AsD9q/

明示的に設定するか、コンテナーでwidth使用することにより、(ビューポートが小さすぎる場合) div が壊れないようにすることもできます: http://jsfiddle.net/MvDZJ/ (幅を使用) またはhttp://jsfiddle.net/xMtBp / (空白を使用)white-space: nowrap;

それが結果です：

ここに画像の説明を入力

divのすべての高さで機能する最初の答え：

コンテナ自体については何も言わなかったので、ビューポートよりも広くないと思います。単純に次のようなことを行うよりも：

HTML

<div>
    <img src="http://lorempixel.com/200/100/">
    <img src="http://lorempixel.com/200/80/">
    <img src="http://lorempixel.com/200/120/">
    <img src="http://lorempixel.com/200/60/">
</div>​

CSS

​div {
    display: table-cell;
    vertical-align: middle;
    /* only added for demonstration */
    height: 200px;
    border: 1px solid red;
}
img {
    vertical-align: middle;
}

ただし、IE7 では処理できないため、これは機能しませんdisplay: table-cell。ここで試すことができます: http://jsfiddle.net/3vXXy/。

于 2012-12-10T15:08:14.707 に答える
0

これはjQueryで実行できます。問題は、操作する明示的なセレクターがないため、ページ上のすべてのdivのすべての画像に影響を与えることです。

まず、CSSで次のように画像をdivの先頭に設定する必要があります。

   div img{vertical-align:top;}

次に、各画像を連続して取得し、その高さを取得して、上部のパディングをdivの高さと画像の高さの差の半分に設定します。

​$(document).ready(function(){
$("img").each(function(){
var margin= ($(this).parent().height() - $(this).height())/2;
    $(this).css('margin-top',margin);
});        
});​

繰り返しになりますが、優れた堅実なセレクターがなければ理想的なソリューションではありませんが、機能します。http://jsfiddle.net/calder12/H4Wkw/

于 2012-12-10T15:29:32.310 に答える