-1

左に浮いている div 内の画像の位置合わせに問題があります。以下のコードで、「logo.jpg」を垂直方向と水平方向の中央に配置する方法は? ありがとうございました。

<!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>
<meta http-equiv="Content-Type" />
<title>layout</title>
<style type="text/css">

body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form {font-size:11px; margin:0;padding:0;line-height: 150%;}
ul,ol,dl {list-style:none}
img {border:0;vertical-align:top;}
ul {list-style:none; padding:0; margin:0;}


#_layout {margin:0 auto; width:980px;}
#_top_cntr {width:980px; height:150px; background:#fff; margin-bottom:10px;}

/* top_cntr */
#_brand {height:110px; background:url(images/top_bg.jpg);}

#_left_logo {width:280px; height:110px; float:left; padding-left:10px;}
#_right_logo {width:680px; height:110px; float:right; margin-left:10px;}

</style>
</head>
<body>
<div id="_layout">
   <div id="_top_cntr">
       <div id="_brand">
            <div id="_left_logo">
                <img src="images/logo.jpg"/>
            </div>
            <div id="_right_logo">
            </div>
       </div>
     </div>
</div>
</body>
</html>
4

3 に答える 3

0

使用する必要がありますが、この例vertical-align: middleのように、要素に対してのみ機能display: table-cellするため、追加する必要があります（#_left_logoのスタイルを変更しました）。

この記事を見ることができます。divのコンテンツを垂直方向に中央揃えする方法は他にもいくつかあります。

于 2012-08-07T00:21:27.437 に答える
0

これは通常、CSSを介して行われると思います。

<div id="_brand">
    <a id="_left_logo" class="img-replacement"> <!-- best practice to make the logo a link -->
        Now you can even throw text Here as a fall back when the image doesn't work
    </a>
    <div id="_right_logo">
    </div>
</div>

その後：

.img-replacement {
    display: block;
    text-indent: -9999px;
}

#_left_logo {
    width:280px; 
    height:110px; 
    float:left; 
    padding-left:10px;

    /* and then: */
    background: url("/images/logo.png") center center no-repeat;
}
于 2012-08-07T01:32:27.727 に答える
0

画像の高さの高さがわかっている場合は、で行うことができますposition: absolute。たとえば、画像サイズは200x60です。

#_left_logo {width:280px; height:110px; float:left; padding-left:10px; position: relative;}

#_left_logo img {width:200px; height:60px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -30px; }
于 2012-08-07T04:00:59.023 に答える