left等定位属性,要使用时,它必需是已定位的元素。(absolute,relative,fixed)
eg:img{position:absolute;left:100px} 如果去掉position:absolute,则left失效。对float:left这种浮动元素也是失效,反正就是定位了才让用哈。
拓展一种居中用法,
(1)先定位,设置 top:0;bottom:0;margin:auto 可以使元素水平居中。
(2)设置 left:0;right:0;margin:auto 可以使元素垂直居中。
(3)设置四个值都是0,margin:auto ;这个元素就在正中间了。如果不设置元素大小,就平铺了。
<div class='outer'>
<div class='inner'>88</div>
</div>
.outer{
position: relative;
height: 200px;
background-color: green;
}
/*(1)水平居中,不设置宽度则会水平铺满父容器*/
.inner {
background-color: red;
position: absolute;
left: 0;
right: 0;
width: 80px;
margin: auto;
}
/*(2)垂直居中,不设置高度则会垂直铺满父容器*/
/* .inner {
background-color: red;
position: absolute;
top: 0;
bottom: 0;
height: 100px;
margin: auto;
} */
/*(3)水平及垂直居中,不设置高度,宽度则会铺满父容器*/
/* .inner {
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 80px;
height: 100px;
margin: auto;
} */