星空网 > 软件开发 > 网页设计

css水平居中的小小探讨

水平居中是常用的几种布局方式之一。主要分为行内元素的居中,块元素的居中。块元素的居中还分为固定宽度的居中,不定宽度的居中。行内元素的居中,使用text-align:center就可以实现,已知宽度的块元素的居中,使用绝对定位以及设置margin为宽的一半的负值就可以实现。但是不定宽度的居中比起上面两种更常用,也更复杂,我们常常需要在分页的页码展示等地方用到不定宽居中,使用起来更方便,下面来研究下常用的几种块元素的水平居中。
 
1.标签嵌套偏移
实现原理:
          联想到固定宽度的居中的实现:先偏移到屏幕中央,在设置其margin方向偏移宽的一半。那么能不能想到一种方法,借用这种思路,先偏移50%到屏幕的右半部分,然后在反方向偏移回来?实现起来比较困难的点是不知道这个宽度是多少。又想到只要让其父宽度和子宽度相等,然后用百分数就可以解决。那么怎么让其父宽度和字宽度一样呢?巧借float具有的包裹性:父元素如果漂浮了,并且没有设置宽高,那么将尽量包裹子元素。
 
实现代码:
 
css水平居中的小小探讨css水平居中的小小探讨
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>不定宽度水平居中</title>  <style>    body{      background-color: #e5da31;    }    .container{      position: absolute;  /*脱离文档流,其宽度将由子元素的宽度决定*/      left:50%;    }    .content{      position: absolute;      left:-50%;      background-color: #2ecc71;    }  </style></head><body><div >  <div >标签嵌套</div></div></body></html>

View Code

实现效果:
css水平居中的小小探讨
css水平居中的小小探讨
优点与缺点:
缺点很明显,需要自己写和文档内容无关的标签,多打了那么几行代码兼容性良好,在ie6+浏览器上查看没有问题
 
2.flex-box布局
实现原理:
先定义一个flex容器,然后设置其内容对齐方式为中间对齐
 
css水平居中的小小探讨css水平居中的小小探讨
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>不定宽度水平居中</title>  <style>    body {      background-color: #e5da31;    }    .container {      display: flex; /*定义一个flex容器*/      justify-content: center; /*定义容器的空间没有被全部占用时,内容的对其方式*/    }    .content{      background-color: #2ecc71;    }  </style></head><body><div >  <div >标签嵌套</div></div></body></html>

View Code

实现效果:
css水平居中的小小探讨
 css水平居中的小小探讨
优缺点分析:
实现起来最简单,但是呢,因为flex的兼容性不好,当要兼容低阶浏览器时慎重使用。
 
3.内联布局
 
实现原理:
 text-align:center可以让行内元素水平居中,如果改变块元素为行内元素,在使用text-align就可以实现水平居中。
实现代码:
 
css水平居中的小小探讨css水平居中的小小探讨
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>不定宽度水平居中</title>  <style>    body{      background-color: #e5da31;    }    .container{     text-align:center;    }    .content{    display: inline;      background-color: #2ecc71;    }  </style></head><body><div >  <div >标签嵌套</div></div></body></html>

View Code

实现效果:
css水平居中的小小探讨
 css水平居中的小小探讨
 
优缺点分析:
用本来是修饰文字对齐方式的text-align来实现水平居中总感觉有点别扭,这块外面的container也先多余,但是为了不影响body内其他元素的局部,暂且如此。另外兼容性不错,在ie6+可以正常显示。



原标题:css水平居中的小小探讨

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流