css实现一段不够一行时居中显示,多于一行时两端对齐
今天有遇到这个问题,不够一行要居中才好看,多于一行居中又很难看:
居中
两端对齐
一开始想用text-align-last:center; 可是这样结果是这样的:
单行的居中了
可是多行的最后一行也居中了。。。
后来改成这样:
1 <div class="text"><p>2. Tap WiFi Key Search</p></div> 2 <div class="text"><p>3. Please wait 5-15 secs in your Wi-Fi Settings for WiFi list to load. Tap on hotspots with "WiFi Master Key WiFi Key Search " to connect</p></div>
.text{ width: 285px; margin: auto; padding: 8px; background-color: #d8d8d8; text-align: center; font-size: 15px; color: #333; } .text p{ display: inline-block; margin: auto; text-align: justify; }
可以让p text-align:justify;display:inline-block;给p加一个外层的框div,这个外层的框text-align:center;
这样p随着文字的宽度变化,并且p在div中居中,当p宽度不够一行的时候就看起来是居中的。
效果就实现了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步