2

私が何をしているように見えても、テイクを画像の横の垂直方向の中央に配置するのに問題があります。

これがなぜなのかについてのアイデアはありますか？検索しましたが、役に立たなかったので、助けていただければ幸いです。ありがとう！

(私が話していることを確認するには、結果ウィンドウを広くする必要があるかもしれません。)

フィドル

HTML:

<div class="first">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Quisque varius pulvinar imperdiet. Cras quam orci, <br> 
       Duis vulputate risus rutrum, elementum purus non,</p>
    <img class="ipad" src="http://www.technobuffalo.com/wp-content/uploads/2012/12/ipad-mini-scaled-1.jpg">
</div>

CSS:

p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}

.first {
    height: 100%;
    vertical-align: middle;
    line-height: 0;
}

.first p {
    display: inline-block;
    width: 49%;
}

.ipad {
    display: inline-block;
    width: 49.2%;
}
4

2 に答える 2

4

次のCSSがうまくいくと思います：

p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}

.first {
    height: 100%;
    line-height: 0;
}

.first p {
    vertical-align: middle;
    display: inline-block;
    width: 49%;
}

.ipad {
    vertical-align: middle;
    display: inline-block;
    width: 49.2%;
}

とに適用vertical-align: middleします。.first p.ipad

vertical-align プロパティは継承されないため、調整が必要な子要素に指定する必要があります。

参照: http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

フィドルのデモを参照してください: http://jsfiddle.net/audetwebdesign/UwffH/

于 2013-08-05T01:40:33.600 に答える