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>
  • 相关阅读:
    MySQL线程独享内存参数
    asp.net使用飞信fetionAPI接口免费发送短信的c#的实例
    VS2008不能创建解决方案
    转载:nginx配置文件的location标签执行顺序和反向代理配置
    图文讲解如何使用Gmail绑定域名开通企业邮箱(使用时代互联的域名管理后台)
    如何在博客园上放google adsense广告,并且不被博客园屏蔽掉google adsense的src
    kingcms 标签
    ADO.NET与SQL Server数据库的交互
    asp.net结合jQuery实现google suggest效果
    ADO.NET与Sql Server和Access的连接
  • 原文地址:https://www.cnblogs.com/xumqfaith/p/7053869.html
Copyright © 2011-2022 走看看