欣欣博客

不入设计门,不是设计人

小技巧小经验之-----居中
/*图片居中*/
<dl>
    <dt><img src=""/><span></span></dt>
    <dd></dd>
</dl>

dt{height:100px;width:100px;text-align:center;}
dt span{ width:0;height:50%;display:inline-block;}
dt img{vertical-align:middle;}
/*span为参照物,只有inline-block类型可以用vertical-align这个属性*/
/*法二:*/
dt{height:100px;width:100px;text-align:center;}
dt span{width:0;height:100px;display:inline-block;vertical-align:middle;}
dt img{vertical-align:middle;}


/*盒子居中*/
html:
<div class="fu">
    <div class="zi"></div>
</div>
css:/*法一*/
.fu{height:500px;width:400px;background:red; position:relative;}
.zi{height:100px;width:100px;background:blue;
        psition:absolute;left:50%;top:50%;margin:-50px 0 0 50px;}
/*法二*/
.fu{height:500px;width:400px;background:red; position:relative;}
.zi{height:100px;width:100px;background:blue;
        position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}/zi盒子的宽高可以自定义无论多少他都会居中z(自适应居中)/

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。本文主要为编者读书笔记,在文章里面很多话是掺杂了编者自己的见解,如果有哪里出现错误或者用词不严谨,请友善留言,编者会及时去更改。 https://blog.csdn.net/u012967849/article/details/52352658
文章标签: html css
个人分类: 前端 H5
想对作者说点什么? 我来说一句

excel小技巧

2012年01月17日 46KB 下载

没有更多推荐了,返回首页

不良信息举报

小技巧小经验之-----居中

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭