• CSS实现文字对齐效果总结


    写在前面的话:在前端页面的编写中,往往会遇到对文字排版的处理,本篇文章旨在对文字排版进行总结,如文字的对齐方式,是否首行缩进等。

    一. text-align 设置文本的对齐方式

    1. 设置左对齐:text-align:left
    2. 设置中间对齐:text-align:center
    3. 设置右对齐:text-align:right

    代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css文字对齐</title>
    </head>
    
    <body>
        <style>
            .txt-center {
                text-align: center;
            }
    
            .txt-left {
                text-align: left;
            }
    
            .txt-right {
                text-align: right;
            }
    
            .txt-justify {
                text-align: justify;
            }
    
            .txt-justify:after {
                display: inline-block;
                 100%;
                content: '';
            }
    
            div {
                 400px;
                margin: 0 auto;
                border: 1px solid #eeeeee;
                padding: 20px;
            }
    
            h1 {
                text-align: center;
            }
        </style>
        <h1>
            中间对齐
        </h1>
        <div class="txt-center">中间对齐中间对齐中间对齐</div>
        <h1>
            左边对齐
        </h1>
        <div class="txt-left">左边对齐左边对齐左边对齐</div>
        <h1>
            右边对齐
        </h1>
        <div class="txt-right">右边对齐右边对齐右边对齐</div>
        <h1>
            两端对齐
        </h1>
        <div class="txt-justify">
                两端对齐两端对齐gfdgfdgfdgfdgg
                齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐
        </div>
    
    
    </body>
    
    </html>

    注意,两端对齐的时候必须加上after伪类,否则没有效果

    二.justify-content对齐

    使用justify-content属性的前提是使用flex布局,即display: flex;

    1.   justify-content: start; //左对齐
    2.  justify-content: center;//中间对齐
    3.  justify-content: end;//右对齐

    代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css文字对齐</title>
    </head>
    
    <body>
        <style>
            div {
                 400px;
                margin: 0 auto;
                border: 1px solid #eeeeee;
                padding: 20px;
            }
    
            h1 {
                text-align: center;
            }
    
            .flex {
                display: flex;
            }
    
            .flex-txt-left {
                justify-content: start;
            }
    
            .flex-txt-center {
                justify-content: center;
            }
    
            .flex-txt-right {
                justify-content: end;
            }
    
            .flex-txt-justify {
                justify-content: space-between;
            }
        </style>
        <h1>
            display: flex 中间对齐
        </h1>
        <div class="flex flex-txt-center">中间对齐中间对齐中间对齐</div>
        <h1>
            display: flex 左边对齐
        </h1>
        <div class="flex flex-txt-left">左边对齐左边对齐左边对齐</div>
        <h1>
            display: flex 右边对齐
        </h1>
        <div class="flex flex-txt-right">右边对齐右边对齐右边对齐</div>
        <h1>
            display: flex 两端对齐
        </h1>
        <div class="flex flex-txt-justify">
            <span>
                两端
            </span>
            <span>
                齐两端
            </span>
        </div>
    </body>
    </html>
     
     
     
  • 相关阅读:
    JDK中Unsafe类详解
    JAVA并发理论与实践
    关于FastJSON
    指数退避算法
    MySQL多表关联查询效率高点还是多次单表查询效率高,为什么?
    App开放接口api安全性—Token签名sign的设计与实现
    使用Jmeter进行http接口性能测试
    短信验证登录实现流程
    使用 Postman 取得 Token 打另一隻 API
    SpringMVC拦截器HandlerInterceptor使用
  • 原文地址:https://www.cnblogs.com/lin494910940/p/16228770.html
Copyright © 2020-2023  润新知