设置display:flex,文字不对齐的解决办法

<!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>

图片描述

要的效果是1和hello底部对齐,也就是1上去一点点!

阅读 11.9k
2 个回答
align-items: baseline;
line-height: 100px;

好好看看flex相关属性哈,基本思路就是先基本线对齐,在让行高等于父标签高度
Flex语法教程-菜鸟

如图

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏