1

次のCSSテンプレートの垂直方向の配置が空のhtmlファイルでのみ機能する理由を理解できないため、気が狂い始めます。

<head>
<style>
        #mylist li {
                display: inline-block;
                list-style: none;
                text-align: center;
                height: 250px;
                padding: 5px;                   
        }
        #mylist .imgcont {
                height: 150px;
                width: 150px;
                line-height: 150px;
                border: 1px solid red;
                padding: 5px;
                overflow: hidden;       
        }
        #mylist img {
                height:120px;
                vertical-align:middle;
        }
</style>
</head>
<body>
<ul id="mylist">
    <li>
        <div class="imgcont">
          <img src="someimg.jpg" />
        </div>
    </li>
    <li>
        <div class="imgcont">
          <img src="anotherimg.jpg" />
        </div>
    </li>
</ul>
</body>
  • <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">「空の」html では、上部にある裸の html テンプレートを意味し、 vertical-align が適用され、画像はdiv コンテナーの垂直方向の中央に配置されます
  • 逐語コピーを実行して、より複雑な html (ヘッダー タグのスタイル、ボディ タグの上部にある ul-list) に挿入すると、突然垂直方向の配置が無視され、イメージがコンテナーの上部に配置されます。ここで何が違いを生むのか理解できません。

スタイル「clear：both」を追加しようとしましたが、効果はありませんでした。

何か案が ？

更新 - 両方のケースのスクリーンショットを追加 プレーン html の垂直方向の位置合わせ 上記の例は、いくつかの複雑な html とマージされ、vertical-align は無視されました

4

1 に答える 1

1

役立つ場合は、以下のコードが見つかるかもしれません。

#mylist .imgcont {
            height: 150px;
            width: 150px;
            line-height: 150px;
            border: 1px solid red;
            padding: 5px;
            overflow: hidden; 
            display:table-cell;
            vertical-align:middle;
            text-align:center;     
    }

以下の出力が得られます。

ここに画像の説明を入力

于 2012-11-23T15:37:36.833 に答える