css实现一行居中显示，两行靠左显示

来源：互联网发布：java审批流程编辑：程序博客网时间：2024/05/19 06:16

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 300px;margin: 50px auto;text-align: center;background: #ccc;}span{text-align: left;font-size: 20px;display: inline-block;vertical-align: middle;border:1px solid red;}i{font-size: 0;width: 0;height: 100%;display: inline-block;vertical-align: middle;}</style></head><body><div><span>测试本测试本测试本测试本本测试本本测试本本测试本</span><i></i>  <!--text-align属性不适用于inline类型的标签，适用于块元素vertical-align 属性只适用于inline-block类型的便签这里span与i元素之间不能有空格否则垂直方向无法居中,原因可能是inline-block类型之间换行，浏览器解析时会将换行解析成空格，而span的元素的宽是自适应内容的宽度，即div的宽度致使span元素与i元素为 “上下关系”，而不是"左右并列"的关系，从而vertical-align不起作用--></div></body></html>

以下为测试代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 300px;margin: 50px auto;text-align: center;background: #ccc;}span{text-align: left;font-size: 20px;display: inline-block;vertical-align: middle;width:191px;}i{font-size: 0;width: 0;height: 100%;display: inline-block;vertical-align: middle;width: 1px;}</style></head><body><div><span>测试本测试本测试本测试本本测试本本测试本本测试本</span><i></i>  <!--span 与 i之间换行span width:191pxi width:1px;200-191-1=8？--></div></body></html>

阅读全文

0 0