css垂直水平居中的整理
方法一:
.demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; text-align:center;} .demo1 img { vertical-align:middle;}
方法二:
.demo2 { width:180px; height:180px; display:table-cell; vertical-align:middle; *font-size:160px; border:1px solid #ddd; text-align:center;} .demo2 img { vertical-align:middle;}
方法三:
.demo3 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;} .demo3_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;} .demo3_inner img { position:relative; top:-50%; left:-50%;} .demo3 >/**/ .demo3_inner { position:static;} .demo3 >/**/ .demo3_inner > img { position:static;}
如果要放文字:
.demo4 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;} .demo4_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;} .demo4_inner p { position:relative; top:-50%; left:-50%;} .demo4 >/**/ .demo4_inner { position:static;} .demo4 >/**/ .demo4_inner > p { position:static;}
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/53
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!