zoukankan      html  css  js  c++  java
  • vertical-align_CSS参考手册_web前端开发参考手册系列

    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>vertical-align_CSS参考手册_web前端开发参考手册系列</title>
    <style>
    .test p{border:1px solid #000;font-size:16px;line-height:2;}
    .test a{margin-left:5px;font-size:12px;}
    .baseline a{vertical-align:baseline;}
    .sub a{vertical-align:sub;}
    .super a{vertical-align:super;}
    .top a{vertical-align:top;}
    .text-top a{vertical-align:text-top;}
    .middle a{vertical-align:middle;}
    .bottom a{vertical-align:bottom;}
    .text-bottom a{vertical-align:text-bottom;}
    .length a{vertical-align:10px;}
    
    .percent a{vertical-align:10%;}
    
    </style>
    </head>
    <body>
    <ul class="test">
    <li class="baseline">
    <strong>与基线对齐</strong>
    <p>参考内容<a href="?">基线对齐</a></p>
    </li>
    <li class="sub">
    <strong>与参考内容的下标对齐</strong>
    <p>参考内容<a href="?">下标对齐</a></p>
    </li>
    <li class="super">
    <strong>与参考内容的上标对齐</strong>
    <p>参考内容<a href="?">上标对齐</a></p>
    </li>
    <li class="top">
    <strong>对象的内容与对象顶端对齐</strong>
    <p>参考内容<a href="?">要对齐的内容</a></p>
    </li>
    <li class="text-top">
    <strong>对象的文本与对象顶端对齐</strong>
    <p>参考内容<a href="?">要对齐的内容</a></p>
    </li>
    <li class="middle">
    <strong>对象的内容与对象中部对齐</strong>
    <p>参考内容<a href="?">要对齐的内容</a></p>
    </li>
    <li class="bottom">
    <strong>对象的内容与对象底端对齐</strong>
    <p>参考内容<a href="?">要对齐的内容</a></p>
    </li>
    <li class="text-bottom">
    <strong>对象的文本与对象顶端对齐</strong>
    <p>参考内容<a href="?">要对齐的内容</a></p>
    </li>
    <li class="length">
    <strong>与基线算起的偏移量</strong>
    <p>参考内容<a href="?">偏移量对齐</a></p>
    </li>
    <li class="percent">
    <strong>百分比</strong>
    <p>参考内容<a href="?">百分比</a></p>
    </li>
    </ul>
    </body>
    </html>
  • 相关阅读:
    【十大思想实验之中的一个】电车难题
    XMLHTTP使用具体解释
    高速排序 解析
    RapeLay(电车之狼R)的结局介绍 (隐藏结局攻略)
    java设计模式演示样例
    [Network]Transport Layer
    【2012.1.24更新】不要再在网上搜索eclipse的汉化包了!
    WebService究竟是什么?
    epoll使用具体解释(精髓)
    贪心算法
  • 原文地址:https://www.cnblogs.com/xumqfaith/p/7053869.html
Copyright © 2011-2022 走看看