网页元素居中问题
来源:互联网 发布:淘宝怎么预约快递 编辑:程序博客网 时间:2024/06/08 04:59
网页元素居中问题
居中问题,就不得不提到块级元素和行内元素。HTML 中的所有标记都分为块级元素和行内元素两种,两者的区别是行内元素标记的下一个标记是接在行内元素的后面,而块级元素的下一个标记是在块级元素的下面,就是所谓的 “标准流”,最明显的例子就是 span 标记和 div 标记
- 网页元素居中问题
- html 标签居中
- CSS 居中
- JS 元素居中
1. html 标签居中
- center 标签是 html 的块元素,居中显示, 仅针对于 IE 浏览器,但不同版本的支持情况不一样会带来浏览器兼容问题
- 标签的 align=”center” 属性,设置或获取表格排列。如 div,table 等标签可以快速使用。但同样也存在兼容问题
2. CSS 居中
- width:auto 属性, 没有固定的宽度,width:auto;如果是固定宽度了,需要 margin:0 auto 。
现在浏览器 如 IE 9+,firefox, chrome,360 等基本上都可以很好的实现。在低版本的浏览器中还存在一些问题。 - img 图片居中,使用 align =”middle” 垂直居中 verticalAlign=”middle”, 会影响你的文字布局。
- 文字居中或者子元素居中 使用 text-aligh:center 这个属性在文字居中很实用,也是最常用的属性之一。当然有时还要结合 display=inline。
- 在绝对定位 position:absolute 中,居中问题稍微麻烦一点,我们可以先将左偏移设置为页面分辨率一半 left =“50%”, 然后可以将左边界(负边界)设置为容器的宽度一半 margin-left:-(width/2)如:这种方式可以很好的兼容现代,低版本的浏览器(IE6 或 IE6+)。
#container { position: absolute; left: 50%; width: 800px; margin-left: -400px; } #container { position: absolute; left: 50%; width: 800px; margin-left: -400px;}
- position:relative 也同样可以采用上述方式,首先给父元素设置 float:left; position:relative; 然后将父元素的左偏移设置为: left =“50%”,在子元素设置 position:relative; left:-50%。
3. JS 元素居中
使用此种方法注意页面在 onresize 时事件处理和 js 的浏览器兼容问题,建议使用 jquery 等 js 库.
var divWidth = obj.offsetWidth; var divHeight = obj.offsetHeight; var divLeft = parseInt((screenWidth - divWidth) / 2); var divTop = parseInt((screenHeight - divHeight) / 2); var divWidth = obj.offsetWidth; var divHeight = obj.offsetHeight; var divLeft = parseInt((screenWidth - divWidth) / 2); var divTop = parseInt((screenHeight - divHeight) / 2); ... javascript'''
//div水平垂直居中#父容器{height:100%;width:100%;margin:0;padding:0;border:0;}div{position:relative;margin:auto;height:500px;width:500px;top:50%;margin-top:-250px;}... css'''
1- 在实际项目练习中遇到居中问题, 经查询解决该问题, 特记录. ↩
0 0
- 网页元素居中问题
- 网页元素居中笔记
- 解决网页居中问题
- 网页居中问题
- 网页居中问题
- 网页元素居中攻略记_(1)元素水平居中
- 网页元素居中攻略记_(2)元素垂直居中
- 网页元素CSS居中实现完整攻略
- 解决不定宽网页元素居中
- 网页元素CSS居中实现完整攻略
- 【absolute下元素居中问题】
- 元素的经典居中问题
- css中元素居中问题
- CSS元素排列(居中)问题
- 网页元素居中攻略记_(3)已知宽高元素水平垂直居中
- 网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中
- 网页元素居中攻略记_(5)未知宽高元素绝对居中
- 关于设置元素居中的一些问题
- HDU 1174 爆头(几何---叉积)
- hdu 1671 Phone List
- PHP7之新增运算符
- UVALive 4617 Simple Polygon(顺/逆时针输出所有点/极角排序)
- java-利用synchronized实现volatile的功能
- 网页元素居中问题
- java面向对象的多态的问题
- 深入理解运算符重载
- 【UNREAL ENGINE 游戏开发】开篇之UE4的BLUEPRINT(蓝图)与C++(新童鞋必看)
- storyboard之 prepareForSegue:sender:
- 线程和进程
- atitit.词法分析原理 词法分析器 (Lexer)
- 实验吧 web Once More
- 配置Git及生成SSH Key