居中的方式有太多种,花样百出,乱花渐欲迷人眼,我们需要化繁为简,将大多问题集中归纳之后,为自己总结一个效率较高并且副作用小的方法,当然每种方法都有小妙用,因此这个总结只是在用最简便的代码方法来提高处理效率.
一个好的架构需要考虑继承性和内容添加的问题,由于pandding的方法时常会造成内容大小难以控制,使得居中后要修改内容就需要修改很多值,因此,所有居中方法中去除padding,而text-align:center;+line-height有强继承性的 CSS 属性 在大的父级元素请慎用!在布局阶段最好用的办法还是margin,记住公式就可以快速居中.
首先是建立一个知识目录以便查找
非定位居中:
[块元素居中]
[内联块元素居中]
[内联元素居中]
[图片居中]
[单行文字居中]
[多行文字居中]
用定位方法居中
[常用方式]
非定位居中的方法
块元素居中的方法,
<a name = "block"> 块元素居中 </a>
display:inline-block
由于第一个块元素的的margin:top会传递给父元素,因此display:inline-block请参考内联块元素.
<a id = "inline_block"> 内联块元素居中 </a>
内联块元素的居中方法
第一种:也是最常用的一种,那就是margin,
给需要居中的元素本身一个margin;
快速计算的公式:margin:第一个值px 第二个值px;
第一个值(垂直居中)=(父级的高-子级的高)/2
第二个值(水平居中)=(父级的宽-子级的宽)/2
该方法在框架定位中尤为有用
<a name = "inline"> 内联元素居中 </a>
内联元素,以及内容居中,
内容对于布局来说,大多只有两块--文字and图片
而就图片居中而言,图片分为背景图片以及标签图片两种
<a name="image">图片居中</a>
背景图片居中:
首先背景图片处理一套:
```background-image:url("地址")
background-repeat:no-repeat;
/**背景图片居中使用position,绝大多数很好用,如果失效,position后面的值可参考内联块元素的mragin公式,需要了解的图片的大小宽高 **/
background-position:center;
<附带:背景图片填充的方法:background-size:contian常用,如有需要也可以自己设置宽高.>
img标签图片居中
图片标签居中,由于img是个内联块标签,居中方式可参看内联块元素居中方法
单行文字居中
<a name ="font"> 单行文字居中</a>
大多数时候我们为了设置文字格式的方便都会套用一个span标签或a标签来嵌套裸露的文字,而且为了框架易维护,我们也建议这样做,当我们将文字嵌套入内联元素标签后,我们就可以将文字当做 内联元素 进行处理.
1.使用text-align进行水平居中
2.使用line-height进行垂直居中
多行文字处理
<a name ="p"> 多行文字居中</a>
按照标签语义化,一般大段文字都用p标签来标记.
1,由于p标签自带上下 16px 的 margin,因此需要先清除一下默认margin.
2,给p设置一个宽高.
3,使用margin时可以参考内联块元素的居中处理方式
定位居中方式
<a name ="position_frist"> 常用方式</a>
定位居中主要作用是要将图片从固定宽高转变为自适应浏览器窗口大小的问题因此一般来说只列举了最常用的一类方法.
由于下面的代码通用性非常强大,大家可以将下面代码用一个class中封装起来,方便使用.
!注意父级需要给定宽高
position: absolute;
top:0;right: 0;bottom:0;left: 0;
margin:auto;
网友评论