北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京web前端培训 CSS布局——居中

时间: 来源:火星人


1.行内元素水平居中text-align:center


对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中,可对元素或者父元素使用text-align:center


2.定宽块级元素水平居中margin: 0 auto;


3.使用表格垂直水平居中


如果你使用的是表格的话,那完全不用为各种居中问题而烦恼了,只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中,垂直居中可以使用 vertical-align:middle,至于水平居中,貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中,IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用,对块状元素无效,需要设置display。


4.使用display:table;margin:0 auto;水平居中


5.使用display:table-cell垂直水平居中


对于那些不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格的居中特性。但是,这种方法只能在IE8+、谷歌、火狐等浏览器上使用,IE6、IE7都无效。


6.单行或多行文本的垂直居中


父元素高度确定的情况下,

单行文本设置父元素的height和line-height一致即可;

多行文本在使用vertical-align:middle的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;


7.绝对定位垂直水平居中


此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的,而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离,所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置,这个负的margin值就取元素宽度或高度的一半。

关键词:北京web前端培训,北京web前端,web前端

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号