zoukankan      html  css  js  c++  java
  • 图片水平垂直居中 多行文字垂直居中

    1.css实现图片垂直居中

     方法一:父级元素设置:display:box;box-align:center;box-pack:center;子元素设置:vertical-align:middle;

    html代码:
    <div class="box"><img src="img.jpg" alt=""></div>
    
    css样式:
    .box{500px;height:500px;text-align: center;display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;display:-moz-box;-moz-box-align:center;-moz-box-pack:center;background:#f0f;}
    img{300px;height:225px;vertical-align: middle;}
    
    注:此方法只支持谷歌火狐浏览器

     方法二:父级元素设置:height:400px;line-height:400px;子元素设置:vertical-align:middle;

    html代码:
    <div class="box"><img src="img.jpg" alt=""></div> 
    css样式:
    .box{500px;height:500px;line-height:500px;text-align:center;} img{300px;height:225px;vertical-align: middle;}
    注:此方法更实用,不必考虑兼容问题。此方法是近似垂直居中。

    2.css实现多行文字垂直居中

     父级元素设置line-height属性,子元素设置display:inline-block;vertical-align:middle;

    html代码:
    <div class="box"><p>是到付是到付金额飞机是到付金额飞机是到付金额飞机是到付金额飞机是到付金额飞机是到付金额飞机付金额飞机是到付金额飞是到付金额飞机</p></div> 
    css样式:
    .box{500px;height:500px;line-height:500px;} p{line-height:normal;vertical-align: middle;display: inline-block;text-align: left;}
  • 相关阅读:
    P3916 图的遍历 题解
    NBL小可爱纪念赛「 第一弹 」 游记(部分题解)
    P4147 玉蟾宫 题解
    十、一些小例子
    九、基础正则表达式BRE
    八.linux系统文件属性知识
    七、linux目录结构知识---实战
    六、linux目录结构知识
    3.20-30岁形成好的习惯
    五、Centos linux系统优化-实战
  • 原文地址:https://www.cnblogs.com/qianrong/p/5407032.html
Copyright © 2011-2022 走看看