关于css居中的个人小结

最近突然想自己整理下关于居中的一些内容,都是些很常用的。
首先把最简单万能的列出来:利用绝对定位和负边距,当然,对于没有确切宽高的元素来说,推荐使用css3的transform属性:

内部是行内元素(如span,a链接)

水平居中:text-align:center;
垂直居中:line-height:外部元素高度

内部是块级元素 (如div)

水平居中:
text-align:center;-->没有效果
内部元素margin:0 auto;
浮动后margin:0 auto;--->没有效果
垂直居中:
line-height:外部元素高度-->有效果,但是仔细看会发现,文字是居中了,但是占据的位置还是在顶部没有居中,文字溢出了,但是不占据空间。

但是前提条件是内部元素没有使用行高,否则没有效果。

vertical-align的使用

vertical-align在上述情况下单独使用都是不会达到垂直居中的效果的,只有在外部元素是display:table-cell形式的情况下,才对内部元素有作用。

列表的居中

这里我们还讨论一种常用的居中的情况,即列表的整体居中,不知道为什么ul设置overflow:hidden;不能包裹子元素li标签,设置ul属性为inline-block行内块级元素时才可以解决问题,再把父元素设置居中,即可实现整体居中效果,内部li元素只需要设置浮动即可,不需要设置多余的样式,内部元素即可居中(如p)。示例
兼容ie7则如下

ul {
    display:inline;
    zoom:1;
}

以上整理主要是为了自己平时用到可以查阅,不需要每次都查百度,有问题欢迎指正。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,216评论 3 30
  • 介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互...
    吧啦啦小汤圆阅读 748评论 0 3
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,321评论 0 5
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,100评论 0 1