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             

  • 相关阅读:
    L84
    L83
    T57
    T56
    Listen 82
    Listen81
    PyQt(Python+Qt)学习随笔:QListView的isWrapping属性
    PyQt(Python+Qt)学习随笔:QListView的movement属性
    PyQt(Python+Qt)学习随笔:QListView的gridSize属性
    第15.20节 PyQt(Python+Qt)入门学习:QColumnView的作用及开发中对应Model的使用
  • 原文地址:https://www.cnblogs.com/l0m0l/p/3382884.html
Copyright © 2011-2022 走看看