css实现⼀⾏⽂字居中，多⾏⽂字左对齐
问题及场景：
当内容能⼀⾏显⽰在盒⼦内时，⽂字居中对齐。
当内容过多换⾏后显⽰在盒⼦内时，⽂字左对齐。
其实这种视觉上的需求还是蛮常见的。⽐如⽤于弹出提⽰框，当提⽰内容⽐较少时，内容居中显⽰在弹出框，提⽰内容⽐较多时，内容居左对齐。但是其纯CSS实现有点⿇烦，⼀般就放掉这个需求，或者，使⽤JS实现。
解决⽅案：
CSS实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*当⽂字为⼀⾏是，则P的宽度⼩于div的宽度，p标签居中显⽰在盒⼦内，⽂字也就居中了 ；当⼤于⼀⾏时，P的宽度和div的宽度是⼀致的 ,⽂字就居左对齐了*/
.content {  width: 200px;  border: 1px solid #ee2415;  text-align: center  ;padding: 2px 5px}
/*display: inline-block使P的宽度根据⽂字的宽度伸缩 */
.content p {  text-align: left;  display: inline-block  }
</style>
<body>
<div class="content">
<p>内容只有⼀⾏居中</p>
</div>
<br>
<div class="content">
<p>内容多⾏左对齐，内容多⾏左对齐</p>
</div>
</body>
</html>
html怎么让所有内容居中效果如下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。