刚刚度过了实习期,进入了试用期。试用期依然会安排学习的任务。在学习中发现css的居中十分常用,做一个小小的探索。

一、水平居中

1.行内元素

可以直接使用text-align:center来解决。例如图片和文字等。

2.块级元素

2.1宽度确定的块级元素,使用margin-left:auto;和margin-right:auto;

2.2宽度不确定的块级元素:

a.用table包裹,再对table使用text-align:center。

b.将元素设置为display:inline,然后在使用textalign:center.

c.将父元素设置float:left;position:relative;left:50%;

将子元素设置float:left;position:relative;left:-50%;

二、竖直居中

1.父元素高度不确定的文本、图片、块级元素:设置相等的上下边距。

2.父元素高度确定的单行文本:line-height设置为父元素的高度。

3.父元素高度确定的多行文本、图片、块级元素:

a.用table嵌套,使用vertical-align:middle;

b.设置display:table-cell;vertical-align:middle;

CSS居中初探的更多相关文章

  1. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  2. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

  3. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  4. CSS居中完全解决方案

    上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...

  5. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

  6. CSS 居中大全【转】

    我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...

  7. CSS居中的实现用法实例

    转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...

  8. 各种div+css居中方式调整(转载)

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  9. CSS居中方法

    css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...

随机推荐

  1. Android开发贴士集合

    Activity.startActivities()——对于从app流的中部启动会非常好. TextUtils.isEmpty()——一个普遍适用的简单工具类. Html.fromHtml()——格式 ...

  2. 高吞吐量的分布式发布订阅消息系统Kafka--安装及测试

    一.Kafka概述 Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据. 这种动作(网页浏览,搜索和其他用户的行动)是在现代网络上的许多社会功能的一个关键因 ...

  3. android 打包流程

    .使用Android SDK提供的aapt.exe生成R.java类文件 .使用Android SDK提供的aidl.exe把.aidl转成.java文件(如果没有aidl,则跳过这一步) .使用JD ...

  4. Android上面安装Linux的方法

    方法一: 并行安装Linux(不在Android操作系统之上运行,需要设备已经unlocked并且rooted) 我还没玩过.放两个书签: How to Install Ubuntu on Andro ...

  5. dede教程之后台登录是自动跳出解决方法

    有时也不知道什么原因,登录后台时输入全部正确点确认按钮时却会自动跳出.必须输入http://你的域名/dede/login.php才可以登录.通过尝试最终解决了问题,下面分享出来: 1.打开根目录da ...

  6. KPI绩效考核为何在国内不管用?

    很多外国很好的管理制度,到了中国都有水土不服,就像KPI绩效考核一样,到了中国执行得很不好,甚至还不如用本土的人治管理方法,那是为何呢?为什么国内学平衡计分法和KPI的热情非常高,效果却往往有限? 其 ...

  7. SQL Server2008如何设置开启远程连接

    登陆SQL Server 2008(windows身份认证),登陆后右击,选择“属性”. 2 左侧选择“安全性”,选中右侧的“SQL Server 和 Windows 身份验证模式”以启用混合登录模式 ...

  8. tengine-2.1.0 + lua + base64

    参考:http://my.oschina.net/eduosi/blog/169606 安装 readline,lua 编译需要用到这个,centos 可以通过 yum 直接安装,如果不需要系统的,可 ...

  9. DMSFrame 之SqlCacheDependency(二)

    上篇文章介绍的是通知模式的缓存机制,这里介绍的是数据库轮循模式处理,这种模式对SQL2005以下的支持还是比较好的 引擎源码如下: /// <summary> /// 轮循模式 /// 数 ...

  10. oracle 日期获取

    ,'YYYY-MM-DD')星期一, to_char(NEXT_DAy(to_date(,'YYYY-MM-DD')星期日 from dual; select to_char(sysdate,'yyy ...