0

シナリオ

テーブルセルメソッドを使用して、imga の内側にan を垂直方向に揃えようとしています ( 「CSS を使用した垂直方向のセンタリングの 6 つの方法」@Vanseo Design):div

<style>
    .container{border: solid 1px #000;display:table;}
    .contentItem{display:table-cell;vertical-align:middle;}
    .contentImg{float:left; width: 50px; margin: 3px;}
    .contentDiv{width: 400px; padding: 10px 2px 2px 2px;}
</style>
<div class="container">
    <div class="contentItem">
        <img class="contentImg" title="test" src="tv1.gif"/>
        <div class="contentDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim.</div>
    </div>
</div>

問題

それは単に機能しません。これは、（実行されていない）jsFiddle の例です。

事実

  • Chrome を使用しています
  • 画像の幅は固定値 (たとえば 50px) に設定する必要があります。
  • 画像の高さは可変であり、画像の読み込み前にはわかりません
  • contentDiv div タグは削除できません。実際には、単純なテキストではなく、動的データを含む複雑な構造が含まれています。
4

4 に答える 4

3

これを試して

<div class="container">
    <div class="contentItem">
        <img class="contentImg" title="test" src="data:image/gif;base64,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"/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim.
    </div>
</div>

CSS

.container{border: solid 1px #000;display:table;}
.contentItem{display:table-cell;vertical-align:middle;}
.contentImg{float:left; width: 50px; margin: 3px;vertical-align:text-top;}
.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}

div を削除できない場合は、css を変更するだけです

.contentDiv{width: 400px; padding: 0px 2px 2px 2px;}
于 2013-05-22T09:23:29.757 に答える
1

画像を浮かせているため、垂直方向の配置が機能しません。画像からフロートを削除し、代わりにテキスト div をインライン ブロック要素にすると、配置が機能します。

.contentImg{width: 50px; margin: 3px;}
.contentDiv{width: 400px; padding: 10px 2px 2px 2px; display:inline-block;}

http://jsfiddle.net/Z8GaT/1/

于 2013-05-22T09:35:19.497 に答える
0

または単に：

.yourClass{
     position: relative;
     top: 50%;
     margin-top: - "the height of your image" / 2+px;
 }

margin-top の値は、画像の高さを引いた値を 2 で割った値である必要があることに注意してください。

于 2013-05-22T09:31:08.727 に答える
0

ここでデモを確認してください

削除する 

.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}

これで問題が解決するかもしれません:)。

于 2013-05-22T09:43:32.603 に答える