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             

  • 相关阅读:
    JavaScript实现HTML导航栏下拉菜单[悬浮显示]
    Paper Pal:一个中英文论文及其代码大数据搜索平台
    小程序定位地图模块全系列开发教学(超详细)
    简单的个人介绍网页主页面【附代码】
    前端分页功能(通用)
    打造完美写作系统:Gitbook+Github Pages+Github Actions
    移动端布局
    三剑客var,let,const
    包含多个段的程序01 零基础入门学习汇编语言29
    更灵活的定位内存地址的方法01 零基础入门学习汇编语言32
  • 原文地址:https://www.cnblogs.com/l0m0l/p/3382884.html
Copyright © 2011-2022 走看看