CSS布局技巧之——各种居中

居中是我们使用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只对行内元素起作用,对块状元素无效。

QQ截图20130925155722

QQ截图20130925155722

在ie6、7中可以通过css的text-algin来控制表格内容的水平方向的对齐,无论内容是行内元素还是块状元素都有效。

QQ截图20130925155722

但在ie8 以及chrome、firefox等浏览器中的text-align:center对块状元素无效,只能用表格自有的align属性。

5、使用display:table-cell来居中

对于那些不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格那很方便的居中特性了。例如:

QQ截图20131014161356

QQ截图20131014161356

但是,这种方法只能在IE8 、谷歌、火狐等浏览器上使用,IE6、IE7都无效。

 

那面所说的都是很基础的方法,自然不能称之为奇淫巧计,下面就来说一些需要使用一些技巧的居中方法。

6、使用绝对定位来进行居中

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

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

QQ截图20130925155722

运行效果:

QQ截图20130925155722

如果只想实现一个方向的居中,则可以只使用left , margin-left 来实现水平居中,使用top , margin-top来实现垂直居中。

 

7、另一种使用绝对定位来居中的方法

此法同样只适用于那些我们已经知道它们的宽度或高度的元素,并且遗憾的是它只支持IE9 ,谷歌,火狐等符合w3c标准的现代浏览器。

下面用一段代码来了解这种方法:

QQ截图20130925155722

运行效果:

QQ截图20130925155722

这里如果不定义元素的宽和高的话,那么他的宽就会由left,right的值来决定,高会由top,bottom的值来决定,所以必须要设置元素的高和宽。同时如果改变left,right , top , bottom的值还能让元素向某个方向偏移,大家可以自己去尝试。

 

8、使用浮动配合相对定位来进行水平居中

此方法也是关于浮动元素怎么水平居中的解决方法,并且我们不需要知道需要居中的元素的宽度。

浮动居中的原理是:把浮动元素相对定位到父元素宽度50%的地方,但这个时候元素还不是居中的,而是比居中的那个位置多出了自身一半的宽度,这时就需要他里面的子元素再用一个相对定位,把那多出的自身一半的宽度拉回来,而因为相对定位正是相对于自身来定位的,所以自身一半的宽度只要把left 或 right 设为50%就可以得到了,因而不用知道自身的实际宽度是多少。

这种使用浮动配合相对定位来居中的方法,优点是不用知道要居中的元素的宽度,即使这个宽度是不断变化的也行;缺点是需要一个多余的元素来包裹要居中的元素。

看下代码:

QQ截图20130925155722

 

运行效果:

QQ截图20130925155722

 

9、利用font-size来实现垂直居中

如果父元素高度是已知的,要把它里面的子元素进行水平垂直居中,则可以使用这种方法,且子元素的宽度或高度都不必知道。

该方法只对IE6和IE7有效。

该方法的要点是给父元素设一个合适的font-size的值,这个值的取值为该父元素的高度除以1.14得到的值,并且子元素必须 是一个inline或inline-block元素,需要加上vertical-align:middle属性。

至于为什么是除以1.14而不是其他的数,还真没有人知道,你只需要记住1.14这个数就行了。

QQ截图20131014161356

QQ截图20131014161356

在方法5中说过在IE8 、火狐谷歌等现在浏览器中可以用display:table-cell来进行居中,而这里的font-size的方法则适用于IE6和IE7,所以把这两种方法结合起来就能兼容所有浏览器了:

QQ截图20131014161356

QQ截图20131014161356         QQ截图20131014161356

上面的例子中因为要居中的元素是一个块状元素,所以我们还需要把他变成行内元素,如果要居中的元素是图片等行内元素,则可以省略此步。

另外,如果 vertical-align:middle 是写在父元素中而不是子元素中,这样也是可以的,只不过计算font-size时使用的  1.14 这个 数值要变成大约 1.5 这个值。

 

以上就是一些常见的居中方法了,如有疏漏或错误之处,敬请指正!

学习前端的同学们,欢迎加入前端学习交流群

前端学习交流QQ群:461593224

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369463.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenJPA:内存泄漏案例研究

本文将提供完整的根本原因分析详细信息以及解决影响Oracle Weblogic Server 10.0生产环境的Java堆内存泄漏(Apache OpenJPA泄漏)的方法。 这篇文章还将演示在管理javax.persistence.EntityManagerFactory生命周期时遵循Java Persistence API最佳实践的重…

以A表中的值快速更新B表中记录的方法

1、问题描述 有两张表,A表记录了某些实体的新属性,B表记录了每个实体的旧属性,现在打算用A中的属性值去更新B中相同实体的旧属性,如下图所示: 类似这样的需求,怎样做比较高效呢? 2、制作模拟数…

JAXB教程–入门

注意:请查看我们的Java XML绑定JAXB教程– ULTIMATE指南 什么是JAXB? JAXB代表用于XML绑定的Java体系结构。它用于将XML转换为java对象,并将java对象转换为XML。JAXB定义了一个用于在XML文档中读写Java对象的API。与SAX和DOM不同&#xff0c…

《Kubernetes权威指南第2版》学习(二)一个简单的例子

1: 安装VirtualBox, 并下载CentOS-7-x86_64-DVD-1708.iso, 安装centOS7,具体过程可以百度。 2:开启centOS的SSH, 步骤如下: (1) yum list installed | grep openssh-server查看是否已经安装了SS…

linux 安装ftp下载,LINUX FTP安装与配置

转载了一篇配置vsftpd服务器的文章,经过自己的配置,终于搞定了!1.安装vsftpdXml代码 yum install vsftpd2.启动/重启/关闭vsftpd服务器Xml代码 [rootlocalhost ftp]# /sbin/service vsftpd restartShutting down vsftpd: [ OK ]Starting vs…

使用Hibernate批量获取

如果需要从Java处理大型数据库结果集,则可以选择JDBC,以提供所需的低级控制。 另一方面,如果您已在应用程序中使用ORM,则回退到JDBC可能意味着额外的麻烦。 在域模型中导航时,您将失去乐观锁定,缓存&#x…

前端经典面试题 不经典不要star!

前言 (以下内容为一个朋友所述)今天我想跟大家分享几个前端经典的面试题,为什么我突然想写这么一篇文章呢?今天我应公司要求去面试了下几位招聘者,然后又现场整不出几个难题,就搜了一下前端变态面试题! HAHA,前提我并不是一个变态,欺负人的面试官.只是我希望看看对…

Web前端开发学习误区,你掉进去了没?

从接触网站开发以来到现在,已经有五个年头了吧,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦、烦恼与纠结都历历在目,感慨颇多。 先从大家学…

spring mvc的工作原理

该文转载自:http://blog.csdn.net/u012191627/article/details/41943393 SpringMVC框架介绍 1) spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。 Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的…

使用IntelliJ IDEA的原因

介绍 我经常遇到一个问题,为什么我使用Intellij来支持另一个IDE(在本例中为Eclipse)。 大多数时候,我会通过演示IntelliJ的某些功能并展示一切的集成程度来回答这个问题。 这让我开始思考使用它的真正原因是什么。 这篇文章将试图…

linux光标美化包,使用 [ powerlevel10k ] 美化你的WSL (Linux)

使用 [ powerlevel10k ] 美化你的WSL (Linux)使用 [ powerlevel10k ] 美化你的WSL (Linux)前言关于linux终端的美化,网上的教程有很多,但对于国内的用户来说,效果往往是这样的:教程中通过以下命令安装 oh-my-zshsh -c "$(cur…

HashMap实现原理分析

1 HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端。 数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大。但数组的二分查找时间复杂度小,为O(1);数组的特点是&#xf…

opencv3.2.0在vs2015下安装与配置

准备工作 VS2015OpenCV 3.2.0OpenCV配置环境变量,path下添加\opencv\build\x64\vc14\bin,新设置的环境变量需要重启才能使用测试工程 新建VC控制台空项目修改平台为x64,这一步先做源文件中加入main.cpp,测试代码:#incl…

如何使用字节序列化双精度数组(二进制增量编码,用于低差单调浮点数据集)...

低延迟系统需要高性能的消息处理和传递。 由于在大多数情况下,数据必须通过有线传输或进行序列化才能保持持久性,因此编码和解码消息已成为处理管道的重要组成部分。 高性能数据编码的最佳结果通常涉及应用程序数据细节的知识。 本文介绍的技术是一个很好…

微信小程序 引入公共页面的几种情况

1、不带参数 首先在pages文件夹中新建一个template文件夹&#xff0c;文件夹中新建一个template.wxml文件&#xff0c;代码如下 <!--template.wxml--> <template name"msgItem"><view><text>This is template.wxml文件&#xff0c;我是一个…

易语言自定义数据类型转c,一步一步跟我学易语言之自定义数据类型

自定义数据类型什么是“自定义数据类型”&#xff1f;顾名思义&#xff0c;就是用户可以随时在程序中自行定义新的数据类型。自定义数据类型时需要设置数据类型的名称及其成员。数据类型成员各属性的设置方法等同于变量设置时相应属性的设置方法。双击“程序”中的“自定义数据…

Redis初步整理

1&#xff0c;Redis 简介 Redis 是完全开源免费的&#xff0c;遵守BSD协议&#xff0c;是一个高性能的key-value数据库。 Redis 与其他 key - value 缓存产品有以下三个特点&#xff1a; Redis支持数据的持久化&#xff0c;可以将内存中的数据保持在磁盘中&#xff0c;重启的时…

阶段十-物业项目

可能遇到的错误&#xff1a; 解决jdk17javax.xml.bind.DatatypeConverter错误 <!--解决jdk17javax.xml.bind.DatatypeConverter错误--><dependency><groupId>javax.xml.bind</groupId><artifactId>jaxb-api</artifactId><version>…

echarts中triggeron与trigger不能同时出现吗_好物|痛风、血糖高、虚不受补能吃它吗?你想知道的阿胶十问十答一锅出!...

最近百草君在整理粉丝留言的时候&#xff0c;发现关于阿胶四物膏的留言不少&#xff0c;并且有重复问题。百草君特意整理出来几个粉丝们特别关注的问题&#xff0c;给大家统一解答&#xff0c;顺序不分前后&#xff1a;Q1阿胶四物膏什么口感&#xff0c;甜不甜&#xff1f;阿胶…

【移动端 Web】怎么循序渐进地开发一个移动端页面

1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础&#xff0c;那么到底什么才是一个像素呢&#xff1f; 像素&#xff1a;一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。这是像素的概念&#xff0c;实际上&#xff0c;Web 前端开发领域&…