display：flex文字不对齐了有什么解决方法吗？

发布于
2018-10-26

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>5-1</title>
    <style type="text/css">
    .a{
        font-size: 20px;
    }
    span{
        font-size: 40px;
    }
    </style>
</head>
<body>
<div class="a"><span>1</span>hello</div>
</body>
</html>

如以上代码！图片描述

要的是这种效果！
但是当a加上display：flex后图片描述

有什么办法能解决这个对齐问题吗？

css html

html5

阅读 3.3k

3 个回答

得票最新

Haiiz

1.1k2217

发布于
2018-10-27

✓ 已被采纳

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>5-1</title>
    <style type="text/css">
    .a{
        display: flex;
        font-size: 20px;
        align-items: flex-end;
        
    }
    span{
        font-size: 40px;
        line-height: 40px;
    }
    </style>
</head>
<body>
<div class="a"><span>1</span>hello</div>
</body>
</html>