一个margin就可以让块状元素响应居中，很实用

【一个margin就可以让块状元素响应居中，很实用】的更多相关文章

一个margin就可以让块状元素响应居中，很实用

之前总结过水平居中的很多方法,但今天在<css世界>这本书里看到margin的一个特性,一行代码就搞定很实用,分享一下 margin: auto能在块级元素设定宽高之后自动填充剩余宽高.margin: auto自动填充触发的前提条件是元素在对应的水平或垂直方向具有自动填充特性,显然默认情况下块级元素的高度是不具备这个条件的.典型应用是块级元素水平局中的实现: display: block;width: 200px;margin: 0 auto; auto的特性是,如果两侧都是auto,则两侧均…

html+css--水平居中总结（不定宽块状元素方法）（一）

来源:http://www.imooc.com/code/6363 在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性.(不定宽块状元素:块状元素的宽度width不固定.) 不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多): 加入 table 标签设置 display: inline 方法:与第一种类似,显示类型设为行内元素,进行不定宽元素的属性设置设置 position:rela…

小tip: margin:auto实现绝对定位元素的水平垂直居中

转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度…

css绝对定位元素实现居中的几个方法

一:CSS绝对定位元素left设为50%实现水平居中绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0px; left:50%; margin-left:-30%; } 这样就能使得一个蓝色区域水平居中二.绝对定位元素的完全居中实现如果要问如何CSS实现绝对定…

定宽块状元素居中 1记（text-align/margin:0 auto）

对于text-align:center的用法只是针对文本相对于父元素的居中,例如: #jz2{ width:300px; margin: 10px auto; border:2px solid red; text-align:center; } <div id="jz2"> 我也要! </div> 如果没有设置margin属性,那么文本只是这样子居中,但是加上margin属性以后可以实现块状元素真正的居中…

本周汇总动态rem适配移动端/块状元素居中/透明度

1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getElementsByTagName("head")[0]; var style=document.createElement("style"); style.innerHTML="html{font-size:"+width/10+"px;}&q…

html+css--水平居中总结-不定宽块状元素方法（三）

来源:http://www.imooc.com/code/6365 除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的方法,设置浮动和相对定位来实现. 方法三:通过给父元素设置float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中. 我们可以这样理解:假想ul层的父层(即下面例子中的div层)中…