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;}
  • 相关阅读:
    设计模式享元模式实现C++
    并查集
    设计模式代理模式实现C++
    设计模式装饰模式实现C++
    最小生成树Prim算法实现
    图的邻接矩阵存储
    威佐夫博弈(Wythoff Game)初识 HDU 1527 POJ 1067
    设计模式原型模式实现C++
    三种经典博弈问题 BashGame;WythoffGame;NimmGame;
    设计模式外观模式实现C++
  • 原文地址:https://www.cnblogs.com/qianrong/p/5407032.html
Copyright © 2011-2022 走看看