《精彩绝伦的CSS》——布局(二)居中块状框
来源:互联网 发布:程序员经常去的论坛 编辑:程序博客网 时间:2024/05/17 06:59
二、居中块状框
最容易理解的就是,给一个固定宽度的父元素内的子元素居中,只需确定子元素宽度,接着计算子元素左右需留出多少空白用子元素的外边距或者父元素的内边距都可以轻松解决。如:
div#contain{width:800px;}
div#main{width:760px;margin:0 20px;}
还有一种情况是,有一个固定宽度的元素,但不知道容器有多大。这时仍可以使用外边距实现。
div#main{width:55em;margin:1 auto}
之所以能这样做是因为CSS规范中说明:当一个元素具有特定的宽度,并且左右外边距都为自动确定时,浏览器会取元素和容器宽度之差,除以二后分别应用在元素的左右外边距上。因此,元素框就被居中了。
要注意的是div比它的容器宽的情况在由左到右书写的语言中,浏览器会将元素框(而不是内容)左对齐,而在由右到左书写的语言中,浏览器会将元素框右对齐。
若要使框内文字也跟着居中只需设定:text-align:center即可
0 0
- 《精彩绝伦的CSS》——布局(二)居中块状框
- 《精彩绝伦的CSS》——布局(五)两栏布局
- 《精彩绝伦的CSS》——布局(一)用轮廓代替边框
- 《精彩绝伦的CSS》——布局(三)遏制浮动
- 《精彩绝伦的CSS》——布局(四)清除浮动
- 《精彩绝伦的CSS》——提示(二)无单位的行高值
- 《精彩绝伦的CSS》——选择器(二)为“目标”元素添加样式(:target)
- 《精彩绝伦的CSS》——选择器(一)伪类与伪元素
- 《精彩绝伦的CSS》——选择器(三)特殊性和重要性
- 《精彩绝伦的CSS》——选择器(一)简写属性值
- 《精彩绝伦的CSS》——选择器(五)多种选择方式
- 《精彩绝伦的CSS》——提示(一)属性值排序
- 《精彩绝伦的CSS》——提示(四)打印样式
- 《精彩绝伦的CSS》——提示(三)让元素“消失”
- CSS居中之美(二)——水平居中
- CSS 定宽块状元素的水平居中设置
- css两种块状定长元素居中方法的不同点
- CSS中不定宽块状元素的水平居中显示
- DAY_02 HTML小白学习笔记
- android产品信息设置
- Solr部署tomcat服务器方式
- Codeforces 797E Array Queries 分块思想
- Lucene入门
- 《精彩绝伦的CSS》——布局(二)居中块状框
- 1028. List Sorting (25)-PAT甲级
- 用python生成与调用cntk模型代码演示
- Codeforces Round #409 (rated, Div. 2, based on VK Cup 2017 Round 2) A -- D
- [leetCode刷题笔记]2017.04.16
- 我的编程之旅——开篇记
- 在北京大学,得罪方正者必成“问题人”
- 网站在浏览器头部的小图标如何弄
- 单向链表的C语言实现与基本操作