Set the solution to misalignment of display:flex, text

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>5-1</title>
    <style type="text/css">
    .a{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    span{
        font-size: 40px;

    }
    </style>
</head>
<body>
<div class="a"><span>1</span>hello</div>
</body>
</html>

the desired effect is that 1 is aligned with the bottom of hello, that is, 1 goes up a little bit!

Sep.23,2021

align-items: baseline;
line-height: 100px;

take a good look at flex-related attributes, ha. The basic idea is to align the basic line first, and let the line height equal to the parent tag height
Flex Grammar course-Rookie



flexbox :
:http://live.datatables.net/vo... Edit in JSBin
:
clipboard.png

Menu