2

これが私の状況です: 私は、さまざまなサイズ (常に異なる) の変化するイメージをスプラッシュの領域に持ち込んでいます。数日前にこれについて質問を投稿し、誰かが提案した解決策を採用しました。ただし、対処しなければならない他の問題がありました。他の問題を修正する更新されたページに戻ってきましたが、この新しいコード内で画像を垂直方向に中央揃えにする方法を確認する必要があります

まず、こちらのページです: http://americanart.si.edu/index_newsplash3m.cfm

当ブログのスライダー下の真ん中の画像です。コードとcssは次のとおりです。

コード：

 <div class="middle">
    <div class="middleimage">


            <img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image" /><br />


        </div>


    <div id="middletext">

            <p>
<a href="http://americanart.si.edu/collections/search/artwork/?id=19670"><i>The Dying Tecumseh</i></a> by Ferdinand Pettrich has returned to the second floor galleries at American Art after his extended stay with the National Portrait Gallery for the exhibition, <a href="http://www.npg.si.edu/exhibit/exh1812.html"><i>1812: A Nation Emerges</i></a>. Visit his new spot among the ...

                </i>

            <span class="red"><a href="http://eyelevel.si.edu/">Read more...</a></span> </p>

        </div>
        </div>

CSS は次のとおりです。

.middle {
    float: left;
    width: 30.5%;
    margin-right: 2.1%;
    margin-bottom: 2% ;
    background-color: #fff;
    min-height: 100%;
    background: url(/@res/img/americanart_blog_test.jpg) no-repeat #fff;
    padding-top: 31px;
    text-align: center;
    position: relative;
}

div.middleimage { height: 207px;
}

div#middletext {margin-right: 2.1%;
    margin-bottom: 2% ;
    background-color: #fff;
    min-height: 100%;
}
div.middle img#middleimg { max-height: 207px;
    max-width: 291px; 
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    vertical-align: middle;
    position: relative;
}

画像の高さが小さいときにテキストが画像領域に入らないようにするために、画像とテキストの周りに新しいネストされた div を作成する必要がありました。

ありがとう。

4

3 に答える 3

2

このdiv.middleimageCSS ルールを追加するには:

display:table;

次に、実際の img タグを次のように div で囲みます。

<div id="imagewrap"><img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image"></div>

そして、次のルールを CSS に追加します。

#imagewrap {
display:table-cell;
vertical-align:middle;
}
于 2013-02-08T18:42:55.960 に答える
1

また、テーブルなしでこれを行うこともできline-height: 207px;ます.middleimageクラスに追加するだけで、画像が中央に配置されます.

div.middleimage {
line-height: 207px;
}
于 2013-02-08T18:46:14.217 に答える
0

私の知る限り、CSS で物事を垂直方向に中央揃えすることはほぼ不可能です。私が読むつもりだった記事があります。

于 2013-02-08T19:00:10.530 に答える