文字单行居中,多行居左/居右

本文介绍了一种使用CSS实现文本在不同情况下的居中与居左显示的方法。通过设置div和p标签的不同样式属性,可以实现在单行文本时居中显示,而多行文本时则变为居左对齐。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

题目要求: 

在文本字数在一行的情况下,让其居中显示,而在文本字数达到多行的情况下,让其居左显示

 

<div>
    <p>标题内容</p>
</div>
div {
    padding : 0 2vw;
    margin : 0 auto; // 使div框居中
    width : 80vw; 
    text-align : center; // 文本居中显示
}
p {
    width : auto;  // 必设
    display : inline-block; // 不能设置为block
    text-align : left; // 居左显示
}

 

转载于:https://www.cnblogs.com/paopaolee/p/8917417.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值