Question

我在div中对齐图像时遇到问题，div向左浮动。在下面的代码中如何将“logo.jpg”对齐到垂直和horizentally中心？谢谢。

<!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>

Answer 1

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

你可以看看this article，还有其他一些方法可以垂直居中你的div的内容

Answer 2

我认为这通常是通过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;
}

Answer 3

如果您知道图像高度的高度，则可以使用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; }

float div中的对齐问题

3 个答案: