zoukankan      html  css  js  c++  java
  • CSS 25 垂直居中

    步骤 1 : 

    line-height方式

    <style>
    #d {
    line-height: 100px;
    }
    div{
      border:solid 1px lightskyblue;
    }
    </style>
     
    <div id="d">line-height 适合单独一行垂直居中</div>

     步骤 2 : 

    内边距方式

    借助设置相同的上下内边距,实现垂直居中效果,可以用在多行文本上

    <style>
    #d {
        padding: 30 0;
    }
    div{
        border:solid 1px lightskyblue;
    }
    </style>
     
    <div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容  </div>

    步骤 3 : 

    table方式

    首先通过display: table-cell;把div用单元格的形式显示,然后借用单元格的垂直居中vertical-align: middle; 来达到效果。
    这样对图片也可以居中,上一步 line-height就不能对图片居中。

    <style>
    #d {
    display: table-cell;
    vertical-align: middle;
    height:200px;
    }
     
    div{
      border:solid 1px lightskyblue;
    }
    </style>
      
    <div id="d">
    <img src="https://how2j.cn/example.gif">
    </div>

  • 相关阅读:
    学习进度博客六
    Ultimate四则运算
    水骑士团队介绍
    返回一个二维整数数组中最大联通子数组的和
    学习进度博客五
    构建之法阅读笔记02
    四则运算4
    敏捷开发方法综述
    第一冲刺阶段站立会议02
    学习进度表_七周
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/13307619.html
Copyright © 2011-2022 走看看