关闭

水平居中and 垂直居中

64人阅读 评论(0) 收藏 举报
分类:

水平居中-行内设置

比如照片,文本之类的行内元素,可以在他们的父元素里设置 text-align:center来实现。

水平居中-定宽的块状元素

 display:block;
width:100px;
margin: 0 auto;

水平居中-不定宽的块状元素

方法一:加入table标签,因为table 标签是长度自适应的,相当于有了宽度,所以直接设置margin: 0 auto ; 
方法二:将子块状元素的display改为inline ,其父元素加上text-align:center;
**方法三:方法三:通过给父元素设置 float,然后给父元素设置 position:relative  left:50%,子元素设置 position:relative  left: -50% 来实现水平居中。

垂直居中-

父元素高度确定的单行文本,height=line-height,
为元素加上<table><tbody><tr><td>,<td>标签默认情况下就有vertical-align:middle ,我们不用再添加什么了
多行文本的display:table-cell;激活vertical-align属性;
将display设置为absolute 或者float:left;就可以设置width和height ,再设置height = line-height;






0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4760次
    • 积分:351
    • 等级:
    • 排名:千里之外
    • 原创:32篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类