0

このテーマに関する多数の投稿を見たり読んだりしましたが、私の環境では何も機能しなかったか、何か間違ったことをしました。さまざまな未知のサイズの画像とテキストを含む div があります。すべての画像と div を垂直方向に中央揃えにしたい。Internet Explorer 9 を使用しています。

これが私のコードです。簡単にするために、試みたさまざまな手法をすべて削除しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div.header
{
height:75px;
background-color:#FFF;
padding-left:10px;
padding-right: 10px;
}
div.headerleft
{
border: none; 
float: left; 
margin: 0; 
padding: 0; 
}

div.headerright
{
border: none; 
float: right; 
margin: 0; 
padding: 0; 
}
h1
{
font: 44px Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 0;
margin-top: 0;
padding-bottom: 0; 
padding-top: 0;
}   

img.centerImage
{
vertical-align:middle;
}    
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="header">
    <div class="headerleft">
        <img class="centerImage" border="0" alt="Test 1" src="../Images/test1.jpg" />
        <img class="centerImage" border="0" alt="Test 2" src="../Images/test2.jpg" />
    </div>
    <div class="headerright">
        <h1>
            Centered Text Vertically
        </h1>
    </div>
</div>
</form>
</body>
</html>

テキストと画像のサイズが不明であることを強調したいと思います。これは確かにソリューションを複雑にすることがわかりました。また、ActiveX の要件に基づいて、Internet Explorer バージョン 9 を使用しています。何かアドバイスはありますか? ありがとう！

4

1 に答える 1

1

垂直方向の配置を使用するには、表示を table-cell に設定してラッパーを設定することをお勧めします。

このフィドルの例を見てください!

CSS:

/* the vertical alignment class */
.centerImage {
    display: table-cell;
    vertical-align:middle;
}

HTML

...
<div class="headerleft">
  <span class="centerImage">
    <img border="0" alt="Test 1" src="path_to_image.jpg" />
  </span>
  <span class="centerImage">
    <img border="0" alt="Test 2" src="path_to_image.jpg" />
  </span>
</div>
<div class="headerright">
  <h1 class="centerImage">Centered Text Vertically</h1>
</div>
...

テスト済み:

IE9、IE8、オペラ、サファリ、ファイアフォックス、K-メレオン、グーグルクローム

ノート：

画像の幅と高さを適切な HTML 検証に指定し、ブラウザがよりよく理解できるようにする必要があります。

これについてもっと読む：

CSS 表示プロパティ | CSS vertical-align プロパティ | CSS の秘訣: 垂直方向の配置とは?

編集済み

reisio からのコメントに関しては、左側の画像と右側のテキストに同じ垂直方向のポイントを持たせるには、より単純な解決策を使用できます。

ここでフィドルを参照してください！

関連CSS

/* the trick you want */
.centerImage {
    vertical-align:middle;
}
div.headerleft {
    border: none;
    float: left;
    margin: 0;
    padding: 0;
    line-height: 75px;
}

div.headerright {
    border: none;
    float: right;
    margin: 0;
    padding: 0;
    line-height: 75px;
}
h1 {
    font-size: 44px;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}

関連する HTML

<div class="headerleft">
  <img class="centerImage" border="0" alt="Test 1" src="path_to_img.jpg" />
  <img class="centerImage" border="0" alt="Test 2" src="path_to_img.jpg" />
</div>
<div class="headerright">
  <h1 class="centerImage">Centered Text Vertically</h1>
</div>

このソリューションでは、img タグに設定された vertical-align を使用し、line-height を使用して同じ vertical-point を作成し、テキストを垂直方向に揃えます。

あなたが読むことができます: CSS line-height プロパティ

編集済み

画像に を設定できない場合height、問題を解決する唯一の方法は、少しJavaScriptを使用して最も高い画像を動的にheight見つけ、それをタグのline-heightに適用することです。H1

この動くフィドルを見てください！

Jクエリ

$(document).ready(function() {

    // initialize the variable to 0
    var height = 0;

    // run by each image to find the tallest
    $('.headerleft img').each(function() {
        height = ($(this).outerHeight(true)>height) ? ($(this).outerHeight(true)) : height;
    });

    // vertical center the text
    $('.headerright h1').css({"line-height": height + "px"});
});

注: and は不要になったため、andから削除しました。line-heightdiv.headerleftdiv.headerright

于 2012-05-12T19:52:12.913 に答える