-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

我认为这通常可以通过 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

你必须使用vertical-align: middle，但因为它只适用于元素，display: table-cell你还需要添加它，就像在这个例子中一样（我已经修改了#_left_logo 的样式）。

你可以看看这篇文章，还有一些其他的方法可以让你的 div 的内容垂直居中

于 2012-08-07T00:21:27.437 回答
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 回答