css水平居中那点事

昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了。。…^^

其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好。。。这样以后也有利于自己重温~~

一,text-align

为什么要第一个写text-align呢?

其实也没有为什么。。。。。(别打我)

但text-align是一个很神奇的东西,在ie6中使用text-align会有惊喜

text-align是文本居中的意思,是使一个块级元素的行内内容对齐,所以正常来说,text-align只对行内内容起作用,不会对块级内容起作用。

但是ie是一个神奇的东西,比较任性。。。在IE6和IE7的混杂模式中,text-align:center可以使块级元素居中。。。很神奇有木有!但是在其他的浏览器中只能作用于行内元素上。

二,margin

在块级元素居中上,我认为使用margin:0 auto,会是一个比较理想的方法,推荐使用,这个办法我们平时也用得够多,就不详细说明了

有的小伙伴会为了对齐元素或者多栏而使用float,但是在设置了float了之后想要居中,margin就没有用了,这时要使元素居中,可以使用负边距的办法或者是给float元素一个容器,再使用margin。

三,使用负边距

在css垂直居中那点事,有讲到使用负边距使块级元素垂直居中的问题,所以自然,使用负边距也可以使块级元素水平居中

首先设置position:absolute,然后使元素像偏移50%:left:50%,最后再反向使用margin-left等于块级元素宽度的一半margin-left:-1/2height便可以使元素水平居中

关于position:abs的位移参考元素我就不多说了,不明白请参考css垂直居中那点事。我觉的我还是讲的挺明白。。。哈哈哈

四,使用伸缩盒(flexible-box)

这也是上一篇讲过的办法,有点懒,我直接给方法

首先需要给要居中的元素一个伸缩盒容器:-webkit-display:box然后设置box-pack:center就可以使元素水平居中了

不明白的请自行搜索伸缩盒的基本知识,但是这个样式在手机端使用的比较多,在浏览器的兼容上面的兼容性不是很好。

题外话:

很神奇的一件事情,在水平居中的方法和垂直居中的方法一样都是4个,水平居中的办法还有很多,在以后如果还遇到其他水平的居中的办法会不定期更新此文章。

本人前端菜鸟,缺陷免不了,还请各位前段大牛不喜勿喷^^

本文为原创作品,未经允许不准私自转载,谢谢!

时间: 2024-10-24 23:29:34

css水平居中那点事的相关文章

有关css居中 那点事

有关css居中 那点事 前言:怎么说呢?我以前只知道margin:0 auto; 从来没想过会这么高深,自从学习了慕课网,我才明白了原来css居中是有很多学问的. 一.分类 首先来说一下分类. 分类指的是对什么样的元素来进行居中,不同的元素对应不同的方法. 1.行内元素 行内元素是什么呢?上一篇博文也讲了这个相关的知识了,包括<span>.<a>.<label>. <strong> 和<em>等元素,特点就是不换行+不能设置长宽. 2.定宽的 块

CSS之浮动那些事

1.清除浮动 下面是两种常用的方式,而这两招也够用了(不用千招会,只需一招精). 1.结尾处加空div标签 clear:both <style type="text/css"> .left{float:left;} .right{float:right;} /*清除浮动代码*/ .clearfloat{clear:both} </style> <div> <div class="left">Left</div&g

CSS之绝对定位那些事

1.垂直居中 有时我们会使用margin: 0 auto;作居中使用.但有的时候我们需要垂直居中,例如在div里面垂直居中显示一张加载中的gif图. 下面这种写法就可以完美实现: 垂直居中的子容器 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:80px; height:80px; } CSS之绝对定位那些事,布布扣,bubuko.com

CSS水平居中

这里指的水平居中当然是说通过CSS来自动控制的,而不是说计算之后,设置一个位置来指定居中的. 一般情况下有三种实现方式: 在实现方式中,我们定义两个名词来方便后面的解说:out--包含需要被居中元素的那个容器,in--需要居中的元素. 1. text-align: center 设置out的text-align: center 保证in的display为inline 2. margin-left : auto; margin-right: auto 设置in的margin-left : auto

css水平居中,竖直居中技巧(二)

css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-C

css水平居中的各种方法

说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了. 但是,有时候会发现这样写了也没出效果.原因是什么呢?  请往下看. 水平居中:分为块级元素居中和行元素居中 行内元素: 行内元素就是内联元素.例如<span>.<a>.<label>.<em>.<img>等.. 直接构建一个具有 ”text-align:center“样式的容器,那么里面包含的行内元素就会都居中了. <div style="text

CSS 水平居中和垂直居中

转自:http://www.cnblogs.com/fu277/archive/2012/09/13/2400118.html 1.水平居中 (1) 文本.图片等行内元素的水平居中 给父元素设置text-align:center可以实现文本.图片等行内元素的水平居中. (2) 确定宽度的块级元素的水平居中 通过设置margin-left:auto;和margin-right:auto;来实现的. (3) 不确定宽度的块级元素的水平居中 方法一: 使用table标签,table本身并不是块级元素,

CSS水平居中和垂直居中解决方案

一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题.可是这个方法有时候完全不起作用,而且对于布局是非常不科学的方法.正确的的设置写法如下(对页面构造没有影响):div {margin-left: auto; margin-right: auto; }这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果.有时候我们还可以简写为 div { marg

CSS 水平居中总结

水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.如下代码: html代码: <body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示.</div> </body> css代码: <style> div.txt