html单行元素居中显示,多行元素居左显示

有很多的业务需要元素或者文字如果单行,居中显示,如果数据增多,居中显示



代码(直接复制到编辑器可用):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单行居中,多行居左显示</title>
<style>
div{text-align: center;border: 1px solid #000;}
p{display: inline-block;text-align: left}
</style>
</head>
<body>
<div>
<p>这是我测试的文字,当文字超出的时候,居左显示。这是我测试的文字,当文字超出的时候,居左显示。</p>
</div>
</body>
</html>
其中只需要给CSS部分设置: 父元素text-align:center,子元素 text-align:center
发布了30 篇原创文章 · 获赞 19 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览