css3总结之居中
居中在前端布局上很常见,也很常用,也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中,垂直居中和水平垂直居中。
针对调整的元素不同,具体的处理方式上有些差异。这里我们先不讲绝对定位下的居中,绝对定位下的居中方法很多,变化也多。下面讲的都是非绝对定位下的方法,原则上有两个,一个是常用,另外一个是兼容性最好。
水平居中是居中效果中最常见的,最常用的方法莫过于下列两种:
HTML:
<div class="box">薛定谔的喵!</div>
1、text-align center
.box {
text-align: center;
}
2、定宽元素 margin: 0 auto;
.box {
width: 96px;
margin: 0 auto;
}
结果自然不言而喻,都是居中的,
如果是对于文本的水平居中更倾向于第一点,因为在第二点上压根就不好计算文本的宽度,即使计算会有小许的误差,虽然对文字兼容性上不是很好,却很适合于按钮或者是宽度固定的块状元素,
反过来需要说明的是第一点也不单单是对文字有效,而是对内联(inline-XX)元素都有效,这个我们可以看
css3总结之居中的更多相关文章
- css3 position fixed居中的问题
通常,我们要让某元素居中,会这样做: #element{ margin:0 auto; } 假设还想让此元素位置固定呢?一般我们会加入position:fixed,例如以下: #element{ po ...
- CSS3 垂直居中 左右居中
display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: c ...
- CSS3/CSS之居中解析(水平+垂直居中、水平居中,垂直居中)
首先,我们来看下垂直居中: (1).如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度! <!DOCTYPE html> <html lang=&quo ...
- CSS3实现图片黑白滤镜居中,hover缩放遮罩的效果
hover: 在前端开发中经常会遇到项目展示,往往会采用卡片方式来描述.众多网站中,普遍采用CSS3的scale()方法来实现交互. 本文即是利用纯CSS实现图片居中缩放,此类方法各大网站均有应 ...
- 常用的CSS居中方式
1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...
- css水平居中总结
前言 看了好多篇帖子,发现没有一个能够直接让新手很快上手使用水平居中布局的,所以在此进行一番总结,也算是我对水平居中布局的一点点积累沉淀,同时也方便初学者们拿来即用. 一.元素分类 1.行内元素 行内 ...
- 垂直居中Demo
换行文字垂直居中1 换行文字垂直居中,兼容所有浏览器 换行文字垂直居中2 换行文字垂直居中,兼容所有浏览器 固定宽高图片垂直居中1 固定宽高图片垂直居中2 图片自适应容器宽高垂直居中 CSS3垂直居中 ...
- CSS注
1.css3内容上下左右居中 .box { display:-moz-box; -moz-box-pack:center; -moz-box-align:center; display:-webkit ...
- css3种方法实现元素的绝对居中
元素的绝对居中应该是很多人熟悉的一个小应用,我记得很多年前去神州数码面试的时候就遇到过这个面试题.方法比较简单,代码如下: .node{ width : 300px; height : 400px; ...
随机推荐
- 我的csdn博客地址
呆雁 持续的谦虚与努力 http://blog.csdn.net/u013539183
- bit、Byte、bps、Bps、pps、Gbps的单位的说明及换算
一.bit与Byte区别 1. bit(比特) 是电脑记忆体的最小单元,在二进制计算机中,每一比特代表0或1的数位信号. 2. Byte(单位字节) 一般表示存储介质大小的单位,数字.字母和特殊符号占 ...
- gym 102082G BZOJ4240 贪心+树状数组
4240: 有趣的家庭菜园 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 756 Solved: 349[Submit][Status][Discu ...
- springcloud微服务总结六
SpringCloud实战7-Config分布式配置管理 分布式环境下的统一配置框架,已经有不少了,比如百度的disconf,阿里的diamand 官方文档对spring Cloud Config的描 ...
- 瀑布模型,(增量开发)渐增式开发,原型化开发,统一过程模型(RUP)
瀑布模型:设计在开发阶段 瀑布模型有以下优点 1)为项目提供了按阶段划分的检查点. 2)当前一阶段完成后,您只需要去关注后续阶段. 3)可在迭代模型中应用瀑布模型. 增量迭代应用于瀑布模型.迭代1解决 ...
- 清华集训2017D2T1 小 Y 和地铁(metro)
题目:https://www.luogu.org/problem/show?pid=P4005 题意:一条线段,给定n个点(n<=44)其中每个点可能对应另外一个点.如果一个点有对应点,那么就要 ...
- LeetCode268.缺失数字
268.缺失数字 描述 给定一个包含 0, 1, 2, ..., n 中 n 个数的序列,找出 0 .. n 中没有出现在序列中的那个数. 示例 示例 1: 输入: [3,0,1] 输出: 2 示例 ...
- POJ1064 Cable master 【二分找最大值】
题目:题目太长了! https://vjudge.net/problem/POJ-1064 题意分析:给了你N根长度为小数形式的棍子,再给出了你需要分的棍子的数量K,但要求你这K根棍子的长度必须是一样 ...
- codeforces1097D Makoto and a Blackboard 数学+期望dp
题目传送门 题目大意: 给出一个n和k,每次操作可以把n等概率的变成自己的某一个因数,(6可以变成1,2,3,6,并且概率相等),问经过k次操作后,期望是多少? 思路:数学和期望dp 好题好题!! ...
- 什么是javascript的中间件?
第一次写博客,有点想在博客园试水的感觉,也分享下觉得有用的东西(源码自己写的) 什么是javascript中间件呢?函数middle就是用来构建中间件的,我用例子说明下 下面我定义了一个函数use,在 ...