单行居中对齐多行靠左对齐样式简易写法

最新推荐文章于 2024-03-30 11:30:00 发布

wm20000

最新推荐文章于 2024-03-30 11:30:00 发布

阅读量1.5k

点赞数 3

分类专栏：代码人生文章标签： html html5

本文链接：https://blog.csdn.net/wm20000/article/details/108370844

版权

代码人生专栏收录该内容

13 篇文章 0 订阅

订阅专栏

H5遇到这样一个需求，一个标签，文字单行的时候要居中显示，为了看着好看，文字换行以后要靠左对齐显示。

这种单行，多行的变化靠一种样式打天下已经适应不了了。

简单的变通了下，思路是，文字外面多包裹一层div，让div在单行的时候自己居中，也就带着文字居中了，div里给文字居左的样式，当文字超过一行，div就会充满父标签，文字就会按照左对齐的方式显示了。上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行居中 多行靠左</title>
</head>
<body>
<div style="width: 300px; text-align: center; background-color: #da8ec5">
    <div>我是处在中间的文字</div>
</div>
<p></p>
<div style="width: 300px; text-align: center; background-color: #da8ec5">
    <div>我是较多的文字，遇到需要换行的时候，按照上面的写法不足一行的文字也会被居中，这是个不好的体验</div>
</div>
<p></p>
<div style="width: 300px; display: flex; justify-content: center; background-color: #da8ec5">
    <div style="text-align: left">我是较多的文字，我的父亲是居中的，但我是靠左对齐的，这样不足一行的时候，我还是居中的，换行以后，我被撑满，靠左对齐就生效了。</div>
</div>
<p></p>
</body>
</html>

wm20000

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
单行居中对齐多行靠左对齐样式简易写法

H5遇到这样一个需求，一个标签，文字单行的时候要居中显示，为了看着好看，文字换行以后要靠左对齐显示。这种单行，多行的变化靠一种样式打天下已经适应不了了。简单的变通了下，思路是，文字外面多包裹一层div，让div在单行的时候自己居中，也就带着文字居中了，div里给文字居左的样式，当文字超过一行，div就会充满父标签，文字就会按照左对齐的方式显示了。上代码<!DOCTYPE html><html lang="en"><head> <meta c
复制链接

扫一扫