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最佳实践的重…

了解真实的rem手机屏幕适配

rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果。 rem 的官方定义『The font size of the root element.』,…

JDBC查询Oracle全部表名称,如何使用JDBC API从Oracle数据库中的现有表中检索记录?...

您可以使用UPDATE查询来更新/修改表中记录的现有内容。使用此功能,您可以更新表的所有记录或特定记录。语法UPDATE table_nameSET column1 value1, column2 value2...., columnN valueNWHERE [condition];要使用JDBC API更新表中记录的内容,您需要-注…

JUnit与EasyMock合作

开发人员始终需要注意所产生的代码。 在实施新功能或修复某些错误之后,应确保它们能够正常工作。 至少可以借助单元测试来实现。 由于此博客致力于Java编程语言,因此今天我将撰写有关JUnit 4.1和EasyMock 3. 1框架的文章。 这些框架的主要目的是简化单元…

nodejs获取当前url和url参数值

//需要使用的模块 http url 当前url http://localhost:8888/select?aa001&bb002 var http require(http); var URL require(url); http.createServer(function(req, res){var arg url.parse(req.url).query; //方法一arg > aa001&bb002var arg url.parse(…

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

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

linux日志文件备份,LINUX 自动备份程序日志(shell)

定期备份脚本案列用tar压缩7天前日志删除7天压缩完日志删除压缩完356天前日志#!/bin/bash#delete expire log#script name drop_log#script default remove 7 day log and remove remove archived a year ago#make date 2015/06/15result_clientfind /orafile/app/s…

HTML 网页创建

最简单的方式就是创建一个文本文档&#xff0c;然后将.txt后缀改为.html或者htm。 完成上面的步骤会创建一个完全空白的网页&#xff0c;下面填充一点内容&#xff0c;代码实例如下: <!DOCTYPE html> <html> <head> <meta charset" utf-8">…

Hadoop赠品–综述

各位极客&#xff0c; Packt Publishing关于Apache Hadoop 的书籍赠品已经结束。 您可以在此处找到比赛的原始帖子。 获奖者 将会获得这本书奖的6位幸运获奖者是&#xff08;姓名出现在他们的电子邮件中&#xff09;&#xff1a; Hadoop真实世界解决方案手册 Sellamuthu&…

企业级应用与互联网应用的区别

企业级应用&#xff1a;商业组织、大型企业而创建并部署的解决方案及应用。涉及的外部资源众多、事务密集、数据量大、用户众多、同时必须有较强的安全性考虑。 企业应用和互联网应用从根本来说是相同的&#xff0c;都是基于因特网、HTTP、浏览器的一种应用&#xff0c;但面向的…

hdu-2602 Bone Collector

题目 http://acm.hdu.edu.cn/showproblem.php?pid2602 分析 基础背包问题,有一个容量为V的背包,各种骨头有大小和价值两种属性,求背包能装的骨头的最大价值. AC代码 #include "bits/stdc.h" using namespace std; int val[1010], vol[1010], dp[1010]; int main(int…

linux vfs open函数,Linux VFS中open系统调用实现原理

用户空间的函数在内核里面的入口函数是sys_open通过grep open /usr/include/asm/unistd_64.h查找到的#define __NR_open2__SYSCALL(__NR_open, sys_open)观察unistd_64.h&#xff0c;我们可以猜测用户空间open函数最终调用的系统调用号是2来发起的sys_open系统调用(毕竟glibc一…

从如何停掉 Promise 链说起

在使用Promise处理一些复杂逻辑的过程中&#xff0c;我们有时候会想要在发生某种错误后就停止执行Promise链后面所有的代码。 然而Promise本身并没有提供这样的功能&#xff0c;一个操作&#xff0c;要么成功&#xff0c;要么失败&#xff0c;要么跳转到then里&#xff0c;要么…

JAXB教程–入门

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

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

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

create_volume.go

package apiimport ("net/http""io/ioutil""errors""fmt")//创建存储空间func CreateVolume(host string, port int, vid uint64) error {url : fmt.Sprintf("http://%s:%d/%d/", host, port, vid)resp, err : http.Post(ur…

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

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

使用Hibernate批量获取

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

c语言 static的用法

static在c里面可以用来修饰变量&#xff0c;也可以用来修饰函数。先看用来修饰变量的时候。变量在c里面可分为存在全局数据区、栈和堆里。其实我们平时所说的堆栈是栈而不是堆&#xff0c;不要弄混。int a ;int main(){ int b ; int c* (int *)malloc(sizeof(int));}a是…

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

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