zoukankan      html  css  js  c++  java
  • vertical-align:内联元素在行框内的垂直对其方式

    语法:

    vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

    默认值:baseline

    适用于:内联及 table-cell 元素

    继承性:有

    取值:

    baseline:将支持valign特性的对象的内容与基线对齐

    sub:垂直对齐文本的下标

    super:垂直对齐文本的上标

    top:将支持valign特性的对象的内容与对象顶端对齐

    text-top:将支持valign特性的对象的文本与对象顶端对齐

    middle:将支持valign特性的对象的内容与对象中部对齐

    bottom:将支持valign特性的对象的文本与对象底端对齐

    text-bottom:将支持valign特性的对象的文本与对象顶端对齐

    <percentage>:用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。

    <length>:用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)

    示例代码:

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3 <head>
     4 <meta charset="utf-8" />
     5 <title>vertical-align_CSS参考手册_web前端开发参考手册系列</title>
     6 <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
     7 <style>
     8 .test p{border:1px solid #000;font-size:16px;line-height:2;}
     9 .test a{margin-left:5px;font-size:12px;}
    10 .baseline a{vertical-align:baseline;}
    11 .sub a{vertical-align:sub;}
    12 .super a{vertical-align:super;}
    13 .top a{vertical-align:top;}
    14 .text-top a{vertical-align:text-top;}
    15 .middle a{vertical-align:middle;}
    16 .bottom a{vertical-align:bottom;}
    17 .text-bottom a{vertical-align:text-bottom;}
    18 .length a{vertical-align:10px;}
    19 </style>
    20 </head>
    21 <body>
    22 <ul class="test">
    23     <li class="baseline">
    24         <strong>与基线对齐</strong>
    25         <p>参考内容<a href="?">基线对齐</a></p>
    26     </li>
    27     <li class="sub">
    28         <strong>与参考内容的下标对齐</strong>
    29         <p>参考内容<a href="?">下标对齐</a></p>
    30     </li>
    31     <li class="super">
    32         <strong>与参考内容的上标对齐</strong>
    33         <p>参考内容<a href="?">上标对齐</a></p>
    34     </li>
    35     <li class="top">
    36         <strong>对象的内容与对象顶端对齐</strong>
    37         <p>参考内容<a href="?">要对齐的内容</a></p>
    38     </li>
    39     <li class="text-top">
    40         <strong>对象的文本与对象顶端对齐</strong>
    41         <p>参考内容<a href="?">要对齐的内容</a></p>
    42     </li>
    43     <li class="middle">
    44         <strong>对象的内容与对象中部对齐</strong>
    45         <p>参考内容<a href="?">要对齐的内容</a></p>
    46     </li>
    47     <li class="bottom">
    48         <strong>对象的内容与对象底端对齐</strong>
    49         <p>参考内容<a href="?">要对齐的内容</a></p>
    50     </li>
    51     <li class="text-bottom">
    52         <strong>对象的文本与对象顶端对齐</strong>
    53         <p>参考内容<a href="?">要对齐的内容</a></p>
    54     </li>
    55     <li class="length">
    56         <strong>与基线算起的偏移量</strong>
    57         <p>参考内容<a href="?">偏移量对齐</a></p>
    58     </li>
    59 </ul>
    60 </body>
    61 </html>
    62             

  • 相关阅读:
    Codeforces Gym 100571A A. Cursed Query 离线
    codeforces Gym 100500 J. Bye Bye Russia
    codeforces Gym 100500H H. ICPC Quest 水题
    codeforces Gym 100500H A. Potion of Immortality 简单DP
    Codeforces Gym 100500F Problem F. Door Lock 二分
    codeforces Gym 100500C D.Hall of Fame 排序
    spring data jpa 创建方法名进行简单查询
    Spring集成JPA提示Not an managed type
    hibernate配置文件中的catalog属性
    SonarLint插件的安装与使用
  • 原文地址:https://www.cnblogs.com/l0m0l/p/3382884.html
Copyright © 2011-2022 走看看