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语言中标识符的作用域、命名空间、链接属性、生命周期、存储类型
    循环练习
    ArrayList集合

    方法
    表单标签
    HTML基础
    二维数组
    一维数组
    switch选择结构
  • 原文地址:https://www.cnblogs.com/qianrong/p/5407032.html
Copyright © 2011-2022 走看看