纯CSS+DIV轻松解决对象在任何位置上水平居中对齐的问题

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2013-02-17 17:43:29
  • 点击:34623
[80分]

其实今天咱们要讨论的话题并非是什么先进技术,而是针对前端开发者经常碰见的“老朋友”而提出个人的一些设计心得:对象水平居中对齐。

众所周知,如果想将文本和图片实现水平居中效果,直接用CSS样式 text-align: center 即可实现,但如果要对任一对象(基本可视为DIV对象)采取同一方法,是完全不见效的。之前在“图层对象绝对居中”一文中也提到,用纯CSS来实现的原理就是利用left:50%,top:50%,margin-top:-height()/2,margin-left:-width()/2。类似地,将要实现水平居中的对象(文本、图片、flash,甚至DIV均可)加入两个“外壳”DIV。其中最外层的CSS设置为 float: left; overflow: visible; left: 50%; position: relative;  而里层的则设置为 float: left; right: 50%; position: relative; 就这么简单就可以轻松实现了对象的水平居中效果。

当然,上面所说的只是最基本、最简化的实例,但在实际应用中往往会掺和相对复杂的排版布局。其中最常见的当然是九格宫应用。打个比方,如果页面的水平布局是三栏组成的,其中左右两栏是规定宽度的,中间栏会自动根据屏幕宽度来自适应。那么这时候该如何设计才能既使中间栏自适应宽度,同时又能使中间栏的内容实现水平居中呢?

这里就得穿插另一个排版布局的技巧了:左右两栏固定宽度,中间栏自适应屏幕宽度而变化。举个实例吧——

<!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" lang="zh" xml:lang="zh">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<meta name="Author" content="56gee 39℃" />   
<title>左右两栏固定,中间栏自适应屏幕宽度</title> 

<style type="text/css"> 
<!-- 
#left { 
 float: left; 
 width: 200px; 
 background-color: #FFC; 
 height: 120px; 
} 
#right { 
 float: right; 
 width: 180px; 
 background-color: #CFC; 
 height: 120px; 
} 
#mid { 
 margin-right: 180px; 
 margin-left: 200px; 
 background-color: #CCC; 
 height: 120px; 
} 
--> 
</style> 
</head>  
<body> 
<div id="left"></div> 
<div id="right"></div> 
<div id="mid"></div> 
</body>  
</html> 

从上例中可见,中间栏的margin-left和margin-right的数值刚才就是左右两栏各自的宽度,其中三者的先后顺序是关键部分(中间栏的源码放置最后)。

所以如果遇到在固定宽度的区域内实现水平居中效果,可以先在外层再套一个DIV来设定宽度,这样一来,不管对象放在哪里都能方便地实现水平居中了。

最终把整个完整的实例源码给大家分享一下吧。

<!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" lang="zh" xml:lang="zh">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<meta name="Author" content="56gee 39℃" />  
<title>左右两栏固定,中间栏自适应屏幕宽度</title> 

<style type="text/css"> 
<!-- 
#left { 
 float: left; 
 width: 200px; 
 background-color: #FFC; 
 height: 120px; 
} 
#right { 
 float: right; 
 width: 180px; 
 background-color: #CFC; 
 height: 120px; 
} 
#mid { 
 margin-right: 180px; 
 margin-left: 200px; 
 background-color: #CCC; 
 height: 120px; 
 margin-top: 0px; 
 margin-bottom: 0px; 
} 
.layout { 
 width: 900px; 
 margin-right: auto; 
 margin-left: auto; 
} 
.infor { 
 FLOAT: left; 
 position: relative; 
 overflow: visible; 
 left: 50%; 
} 
.infor .item { 
 float: left; 
 position: relative; 
 right: 50%; 
} 
--> 
</style> 
</head>  
<body> 
<div class="layout"> 
  <div id="left"></div> 
  <div id="right"></div> 
  <div id="mid"> 
    <div class="infor"> 
     <div class="item"> 
          <img border="0" src="/images/default.jpg" /><br /> 
          www.56gee.com 
        </div> 
    </div> 
  </div> 
</div> 
</body>  
</html> 
收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华