Fatal编程技术网
  • css/
  • Css 浮动div中的对齐问题

Css 浮动div中的对齐问题

css

Css 浮动div中的对齐问题,css,Css,我在对齐浮动到左侧的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>

我在对齐浮动到左侧的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>


布局
正文，div，ul，li，dl，dt，dd，ol，p，h1，h2，h3，h4，h5，h6，表单{字体大小：11px；边距：0；填充：0；行高：150%；}
ul，ol，dl{列表样式：无}
img{边框：0；垂直对齐：顶部；}
ul{列表样式：无；填充：0；边距：0；}
#_布局{边距：0自动；宽度：980px；}
#_顶部{宽度：980px；高度：150px；背景：fff；边距底部：10px；}
/*顶置*/
#_品牌{高度：110px；背景：url（images/top_bg.jpg）；}
#_左_徽标{宽度：280px；高度：110px；浮动：左；左填充：10px；}
#_右_标志{宽度：680px；高度：110px；浮动：右；左边距：10px；}
您必须使用
垂直对齐：中间
，但由于它仅适用于具有
显示：表格单元格的元素
，您还需要添加它，如中所示（我已修改了##u left_徽标的样式）

你可以看看，还有其他几种方法可以让你的div内容垂直居中，我认为这通常是通过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>
如果您知道图像高度的高度，可以使用
位置：绝对
。例如，图像大小为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; }
投票者：考虑在投票时增加评论 
#_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; }