码迷,mamicode.com
首页 > 其他好文 > 详细

测试 居中

时间:2019-11-20 23:47:08      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:垂直居中   position   css   tom   高度   测试   效果   absolute   img属性   

div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果。
1. div水平居中:设置margin的左右边距为自动。margin:0 auto;
2. div中的文字居中:将div的行高设置跟其高度一样的值。 height:20px; line-height:20px;
2.1div中的图片居中,方法一:将div的行高设置跟其高度一样的值,将其中的图片img外套上标签i,设置i和div同时垂直居img属性
img属性vertical-align

垂直居中
            margin:auto;
            position: absolute;  /*  父元素需要相对定位,子元素绝对定位 */
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;


垂直居中
        position: absolute;      /*  父元素需要相对定位,子元素绝对定位 */
        top: 50%;
        left: 50%;
        margin-top:-100px ;   /* 二分之一的height,width */
        margin-left: -100px;

测试 居中

标签:垂直居中   position   css   tom   高度   测试   效果   absolute   img属性   

原文地址:https://www.cnblogs.com/enych/p/11901607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!