|
居中是咱们运用css来布局时常遇到的状况。运用css来进行居中时，有时一个属性就能搞定，有时则必须必定的技巧才可兼容到所有浏览器，本文就居中的有些常用办法做个简单的介绍。
注：本文所讲办法除了尤其说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。
先来讲几种简单的、人畜没害的居中办法
1. 把margin设为auto
详细来讲便是把要居中的元素的margin-left和margin-right都设为auto，此办法只能进行水平的居中，且对浮动元素或绝对定位元素没效。
2、运用 text-align:center
这个没什么好说的，只能对照片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
3、运用line-height让单行的文字垂直居中
把文字的line-height设为文字父容器的高度，适用于仅有一行文字的状况。
4、运用表格
倘若你运用的是表格的话，那完全不消为各样居中问题而懊恼了，只要用到 td(亦可能会用到 th)元素的 align=”center” 以及 valign=”middle” 这两个属性就能够完美的处理它里面内容的水平和垂直居中问题了,况且表格默认的就会对它里面的内容进行垂直居中。倘若想在css中掌控表格内容的居中，垂直居中能够运用 vertical-align:middle，至于水平居中，貌似css中是无相对应的属性的,然则在IE6、7中咱们能够运用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起功效，对块状元素没效。
在ie6、7中能够经过css的text-algin来掌控表格内容的水平方向的对齐，没论内容是行内元素还是块状元素都有效。
但在ie8+以及chrome、firefox等浏览器中的text-align:center对块状元素没效，只能用表格自有的align属性。
5、运用display:table-cell来居中
针对哪些不是表格的元素，咱们能够经过display:table-cell 来把它模拟成一个表格单元格，这般就能够利用表格那很方便的居中特性了。例如：
| 
发表于 2024-6-30 09:41:46
