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; ...
随机推荐
- Python3用sys和time模块实现进度条
import sys import time def view_bar(num, total): rate = float(num) / float(total) rate_num = int(rat ...
- golang包引用解析
golang包引用解析 环境变量配置如下: GOROOT----[C:\Go] GOPATH----[F:\workspace\go_home] vs code配置如下: F:\workspace\g ...
- [转][Unity3D]引擎崩溃、异常、警告、BUG与提示总结及解决方法
1.U3D经常莫名奇妙崩溃. 一般是由于空异常造成的,多多检查自己的引用是否空指针. 2.编码切换警告提示. 警告提示:Some are Mac OS X (UNIX) and some ...
- js中自己实现bind函数的方式
最近由于工作比较忙,好久都没时间静下心来研究一些东西了.今天在研究 call 和 apply 的区别的时候,看到 github 上面的一篇文章,看完以后,感觉启发很大. 文章链接为 https://g ...
- Hero
Time Limit:3000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Description When pl ...
- oracle数据库修改密码
忘记了数据库的登录密码,oracle数据库无法登录了. 先删除原先的密码保存文件: del E:\oracle_app\Administrator\product\11.2.0\dbhome_1\da ...
- C# B站的弹幕提取
要知道B站的弹幕位置 如果只考虑视频,B站的链接格式为:https://www.bilibili.com/video/av34042815.把av后面的数字看做是唯一标记即可. 既然能够把弹幕加载出来 ...
- hdu-1022-栈
Train Problem I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- scrapy模块之分页处理,post请求,cookies处理,请求传参
一.scrapy分页处理 1.分页处理 如上篇博客,初步使用了scrapy框架了,但是只能爬取一页,或者手动的把要爬取的网址手动添加到start_url中,太麻烦接下来介绍该如何去处理分页,手动发起分 ...
- STL:set用法总结
一:介绍 set是STL的关联式容器,以红黑树(Red-Black Tree)作为底层数据结构.自动去重,保证每个元素唯一,并对数据进行排序. 命名空间为std,所属头文件为<set> 二 ...