526互联

css基础-垂直对齐vertical-align

发布时间 2023-07-22 20:29:31作者: 码农-编程小子
  1. 什么是垂直对齐vertical-align
    指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。不能用它垂直对齐块无素
    必须是行内或者行内块元素
  2. 对齐方式有哪些
    /* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

    botton/top line
    middle line
    base line

  3. 应用场景

　　　　使行内元素盒模型与其行内元素容器垂直对齐

　　　　垂直对齐表格单元内容。

　　例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 100px;
        height: 200px;
        background: #ef2;
        vertical-align: middle;
        display: inline-block;
    }
</style>

<body>
    <div>


    </div>
    <span>Vertical-align
        Probleom</span>
</body>

</html>