您的位置：首页 > Web前端 > CSS

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

2017-08-07 22:23 495 查看 
<!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:191px
i width:1px;
200-191-1=8？

-->

</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航