zoukankan      html  css  js  c++  java
  • vertical-align的理解

    vertical-align属性设置行内元素的垂直对齐。下面我总结了关于盒子div的垂直对齐。


    <div class="temp">
    <div class="juzhong">fagagagagag</div>
    <div class="demo">xxxxxxxxxxx</div>
    </div>
    css如下:
    .juzhong{
    background: red;
    line-height: 60px;
    display: inline-block;
    }
    .demo{
    background: green;
    height: 90px;
    display: inline-block;
    vertical-align: middle;
    }
    ------------------
    <div class="juzhong">fagagagagag</div>
    <div class="demo">xxxxxxxxxxx</div>
    <div class="xx"><div>ddafafjklj</div></div>
    css-------
    .juzhong{
    background: red;
    line-height: 60px;
    display: inline-block;
    }
    .demo{
    background: green;
    height: 90px;
    display: inline-block;
    vertical-align: middle;

    }
    .xx{
    background: blue;
    height: 200px;
    vertical-align: middle;
    display: inline-block;
    }


    经过试验,得出的结论是:第一个div必须设置line-height,其他设置display和vertical-align。

    若给第一个div加上height:300,效果如下,

    仍然是以行高为标准的居中。并不以盒子的高度为基线。

    若给第二个盒子加上line-height,,改变的是文字元素在该盒子中的行号,其他不变。
    去掉height,改变的是盒子的高度,仍然居中对齐。
    若将vertical-align设置为bottom,则会在正行高度的最下方对齐。

  • 相关阅读:
    【[CQOI2015]选数】
    杜教筛
    【[CQOI2009]跳舞】
    【简单的数学题】
    【[SDOI2013]泉】
    【[AHOI2013]差异】
    【[HEOI2016/TJOI2016]序列】
    【[SDOI2008]Sandy的卡片】
    linux系统编程之信号(一)
    linux系统编程之进程(五)
  • 原文地址:https://www.cnblogs.com/nicefuting/p/4626500.html
Copyright © 2011-2022 走看看