HTML+CSS元素内的文本，实现单行居中对齐，多行靠左对齐

本文转载自查看原文 2020-08-26 09:42 457

HTML：

<body>
    <!-- 元素内的文本，实现单行剧中，多行靠左 -->
    <p>
        <span>啦啦啦啦啦啦</span>
    </p>

CSS：

<style> 
        p{
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            text-align: center;
        }
        span{
            display: inline-block;
            text-align: left;

        }
    </style>

单行效果：

多行效果：

内联元素大小是内容撑出来的，但其效果不会使其成为一个块，要将<span>转为内联块

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css实现单行的靠左靠右和居中效果有几张高度不一样的小图片，如何用html+css实现在同一行垂直居中对齐？纯CSS实现文字一行居中，多行左对齐的方法 css文本溢出省略（单行，多行） html单行、多行文本溢出隐藏 CSS实现图片与文本的居中对齐的常见方式 HTML+CSS文本两端对齐,文字自动平均分布 CSS实现单行、多行文本溢出显示省略号（…） CSS3实现单行、多行文本溢出（省略号的形式出现） CSS实现单行、多行文本溢出显示省略号（…）