纯CSS+DIV轻松解决对象在任何位置下水平对齐的有关问题
日期：2014-05-17 浏览次数：20771 次
纯CSS+DIV轻松解决对象在任何位置上水平对齐的问题
其实今天咱们要讨论的话题并非是什么先进技术，而是针对前端开发者经常碰见的“老朋友”而提出个人的一些设计心得：对象水平对齐。
众所周知，如果想将文本和图片实现水平居中效果，直接用CSS样式 text-align: center 即可实现，但如果要对任一对象（基本可视为DIV对象）采取同一方法，是完全不见效的。之前在“图层对象绝对居中”一文中也提到，用纯CSS来实现的原理就是利用left：50%，top：50%，margin-top：-height()/2，margin-left：-width()/2。类似地，将要实现水平居中的对象（文本、图片、flash，甚至DIV均可）加入两个“外壳”DIV。其中最外层的CSS设置为 FLOAT: left; right: 50%; position: relative; 而里层的则设置为 float: left; overflow: visible; left: 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" />
<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来设定宽度，这样一来，不管对象放在哪里都能方便地实现水平居中了。
最终把整个完整的实例源码给大家分享一下吧。
------解决方案--------------------
固定宽度水平居中可以用 margin-left:auto;margin-right:auto;
而文体，图片水平居中可以用 text-align:center;
其实今天咱们要讨论的话题并非是什么先进技术，而是针对前端开发者经常碰见的“老朋友”而提出个人的一些设计心得：对象水平对齐。
众所周知，如果想将文本和图片实现水平居中效果，直接用CSS样式 text-align: center 即可实现，但如果要对任一对象（基本可视为DIV对象）采取同一方法，是完全不见效的。之前在“图层对象绝对居中”一文中也提到，用纯CSS来实现的原理就是利用left：50%，top：50%，margin-top：-height()/2，margin-left：-width()/2。类似地，将要实现水平居中的对象（文本、图片、flash，甚至DIV均可）加入两个“外壳”DIV。其中最外层的CSS设置为 FLOAT: left; right: 50%; position: relative; 而里层的则设置为 float: left; overflow: visible; left: 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" />
<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来设定宽度，这样一来，不管对象放在哪里都能方便地实现水平居中了。
最终把整个完整的实例源码给大家分享一下吧。
【查看更多】
div
css
------解决方案--------------------
固定宽度水平居中可以用 margin-left:auto;margin-right:auto;
而文体，图片水平居中可以用 text-align:center;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
