0

CSS の垂直方向の配置はよくある落とし穴のようですが、本当に助けが必要です。

テキストを常に画像の左側の「中央」の垂直位置に配置したい（画像test.gifの寸法は異なります）

私はこのようなhtml要素の構造を持っています（残念ながらシステムの制限により変更できません）

<div class="wrapper">
    <div class="logo"> 
        <img alt="some text" src="http://localhost/test.gif">
    </div> 
    <div  class="source">some text</div>
</div>

CSS:

.wrapper {clear: both;}
.logo {float: left;}
.source { float: left;line-height: 16px;}

1.5 時間費やしましたが、運がありませんでした。配置などの異なるさまざまな要素に垂直方向の位置合わせを適用しようとしました...助けてください!

4

2 に答える 2

0

IE7 をサポートする必要がない場合は、次を試してください。

.wrapper { display: table; }
.logo { display: table-cell; }
.source { display: table-cell; vertical-align: middle; }

基本的に、表には中央に垂直に揃えるオプションがあり、表divのように振る舞わせることで、そのオプションを模倣することができます。

于 2013-10-08T19:18:41.660 に答える
0

よくある問題ですが、ここでよく説明されています: http://phrogz.net/css/vertical-align/

キーポイント

親コンテナーをposition:relativeまたはとして指定します。position:absolute

子コンテナーに固定の高さを指定します。

position:absolute をtop:50%子コンテナーに設定して、上部を親の中央に移動します。

margin-top:-yy項目を上にオフセットするには、yy を子コンテナーの高さの半分に設定します。

<style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>

...

<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
于 2013-10-08T19:08:42.297 に答える