一枚

8

水平居中and 垂直居中

水平居中-行内设置

比如照片,文本之类的行内元素,可以在他们的父元素里设置 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;






阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Doigt_love/article/details/52347652
个人分类: CSS
上一篇设置元素的盒类型+创建浮动盒
下一篇事件
想对作者说点什么? 我来说一句

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

关闭
关闭