css - 如何在行高内将文本对齐到中间
问题描述
我想把一个大字符放在垂直和水平的中心对齐。这是我的风格和结果
div {
border: 1px solid black;
border-radius: 50%;
width: 300px;
height: 300px;
margin: 150px auto;
text-align: center;
line-height: 300px;
}
span {
display: inline-block;
background-color: burlywood;
line-height: 0.5;
vertical-align: middle;
font-size: 300px;
}
<div><span>s</span></div>
我怎样才能把's'放在中间?
解决方案
看起来css的区别在于lower case
字母:
div {
border: 1px solid black;
border-radius: 50%;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
background-color: burlywood;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 50%;
height: 50%;
font-size: 10em;
}
<div><span>S</span></div>
<div><span>s</span></div>
<div><span>M</span></div>
<div><span>m</span></div>
推荐阅读
- android - 没有@Provides-annotated 方法就不能提供 Hilt
- oop - python OOP类继承示例
- windows-installer - Windows 11 Home Insider Preview x86_64 上的驱动程序安装错误
- c - 打印地址功能
- google-apps-script - 数据验证脚本循环
- python - 一个简单的while循环有问题
- clickhouse - 关于 ClickHouse 复制的 count() 查询
- html - Angular 中的水平垫卡列表
- elasticsearch - Kibana Lens - 对聚合进行排序?
- php - 未捕获的错误:调用 /home/stitchon/public_html/wp-includes/PHPMailer/PHPMailer.php:874 中的未定义函数 PHPMailer\PHPMailer\mail()