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