纯css设置单行居中对齐 多行左对齐

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文字测试</title>

    <style type="text/css">

        /*代码开始*/

        li {

            /* 这些都不重要 */

            float: left;

            width: 150px;

            background: #fafafa;

            height: 50px;

            margin-right: 10px;

            /* 重点 */

            text-align: center;

        }

        /* 重点 */

        p {

            display: inline-block;

            text-align: left;

        }

    </style>

</head>

<body>

    <ul>

        <li>

            <p>一行文字</p>

        </li>

        <li>

            <p>这里是比较长的两行文字</p>

        </li>

    </ul>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 大小不固定的图片和多行文字的垂直水平居中一、大小不固定,多行文字的垂直居中① 单行文字可能很多人都知道如何让单行文...
    Wang_Yong阅读 3,931评论 0 0
  • html思维导图 css思维导图 01.vscode软件的使用 ctrl+ +- :调整视图大小 !+table ...
    SY阅读 3,744评论 0 0
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,382评论 0 11
  • CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器...
    凶猛老鹰阅读 1,625评论 0 0
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,544评论 0 1