4

画像を正しく垂直に配置するのに問題があります。div高さと行の高さが40pxのコンテナがあります。中には2つと1つdivを含む別のものがあります。画像の高さは30pxに設定されているため、画像は縮小されます。imgspan

のvertical-alignプロパティはimgmiddleに設定されています。ただし、生成されるオフセットは、FirefoxとChromeで、上部が8ピクセル、下部が2ピクセルです。vertical-alignプロパティをに設定した場合、topまたはbaseline画像が上端にある場合は、画像をbottom下端に移動するように設定します（間隔はまったくありません）。

余分なマークアップなしでそれらを適切に整列させる方法を見つけようとしましたが、何も見つからないようです。div内で画像を垂直方向に整列させる方法の解決策も試しましたが、うまくいきませんでした。

問題を説明するためにjsfiddleを作成しました：http：//jsfiddle.net/pbQDS/

あなたが助けることができることを願っています！ありがとう！

4

3 に答える 3

1

「vs」spanを使用して高さを 100% に拡張し、画像を中央に揃えます。paddingまた、両方の親コンテナを目的の高さに揃えようとはしませんが、余分なコンテナやmargin競合を避けるために、そのうちの 1 つだけを揃えます。このデモをご覧ください: http://jsfiddle.net/NcrGF/1/

于 2013-03-12T14:17:38.637 に答える
1

CSS:

#test  {
    position:relative;
    width: 980px;
    margin: 20px auto 10px auto;
    padding:0;
    position: relative;
    background: #7B0000;
    border:solid 1px blue;
}

#test .section { 
    display:block;
    position:relative;
    padding:10px 0;
    margin:0;
}
#test .section:last-child { float: none; }
#test .section:first-of-type { padding-left: 180px; }
#test img { padding:0; margin:0; display:inline-block; height:30px; vertical-align: middle; position:relative; top:50%; }
#test .section span {position:relative; left:3px; top:50%; display: inline-block;} }

私のJsFiddle デモ

于 2013-03-12T13:33:42.667 に答える
0

わかりました、助けてくれてありがとう。私はそれを考え出した。問題はline-height物件でした。親コンテナ#testまたは内部.sectionのいずれかを指定するline-heightと、誤算が発生しました。代わりに をに割り当てるline-heightと、spanすべてがうまくレンダリングされるようです。

于 2013-03-12T15:27:51.403 に答える