0

2つの画像を含むdivがあります。

最初の画像の高さはdivの高さと同じですが、2番目の画像の高さはdivの高さよりも低くなっています。失敗したこの画像を縦に中央揃えにしたい。これが私のマークアップです。現在のすべてのブラウザで機能するように、これを行う方法を教えてください。

ありがとう

 <div class="left">
        <img alt="" src="Images/Logo.png" style=" border:2px dashed red;" />
        <img class=TI alt="Tayyiba Institute" src="Images/TayyibaInstitute.png" style=" border:2px dashed orange;" />
    </div>

    div.Container div.Left
{
width:50%;
float:left ;
display:inline;
}

div.Container div.Left img.TI
{        
 width:92px;
 height:95px;
 float:left;
 line-height:200px;
 vertical-align:middle;
 margin:auto 0 auto 0;
 display:block ;
}
4

2 に答える 2

1

シンプルにしてください。

マークアップ:

<div class="left"> 
    <img alt="" src="Images/Logo.png" /> 
    <img alt="" src="Images/TayyibaInstitute.png" /> 
</div>

スタイルシート:

.left img { 
    vertical-align: middle; 
}

この結果で。

于 2012-10-13T12:24:09.837 に答える
1

さて、ここにはたくさんの間違いがあります... 1つずつ見ていきましょう...

1) ここに引用符はありませんclass=TI

2) コンテナ div はどこにありますか?div.Container div.Left img.TI

最初の画像を左にフロートさせposition: relative;、次のように 2 番目の画像に与える必要があります。

私のフィドル

HTML

<div class="left">
    <img alt="" src="Images/Logo.png" style=" border:2px dashed red; float: left;" />
    <img class="TI" alt="Tayyiba Institute" src="http://www.cbfaizabad.org.in/images/bullet/0043_bullet2.png" style=" border:2px dashed orange;" />
</div>

CSS

.Left
{
float:left ;
}

.TI
{        
    position: relative;
    top: 5px;
}​

提案: CSS をクリーンアップし、詳細を確認する

于 2012-10-13T11:40:36.820 に答える