轉載——-css 文本左右對齊

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　左右對齊：設定常值內容兩端，調整文字的水平間距，使其均勻分布在左右頁面邊界之間。左右對齊使兩側文字具有整齊的邊緣。所選的內容每一行全部向頁面兩邊對齊，字與字之間的距離根據每一行字元的多少自動分配。

------------------------------------------------轉載原文---------------------------------------------------

在做表單時我們經常遇到讓上下兩個欄位對齊的情況，比如姓名，手機號碼，出生地。這樣我們就要用到 text-align， text-justify樣式了。

text-align直接設為justify就行了，text-justify的情況就複雜了，可能有人對它還不熟悉。IE的取值如下：

auto :允許瀏覽器使用者代理程式確定使用的左右對齊法則
inter-word :通過增加字之間的空格對齊文本。該行為是對齊所有文本行最快的方法。它的左右對齊行為對段落的最後一行無效
newspaper : 通過增加或減少字或字母之間的空格對齊文本。是用於拉丁文字母表左右對齊的最精確格式
distribute :處理空格很像newspaper，適用於東亞文檔。尤其是泰國
distribute-all-lines :左右對齊行的方式與distribute相同，也同樣不包含兩段對齊段落的最後一行。適用於表意字文檔
inter-ideograph : 為表意字文本提供完全左右對齊。他增加或減少表意字和詞間的空格

但它最早是作為IE的私人實現，像text-overflow， overflow-x等，在FF很晚才實現，換言之有嚴格的相容性問題。並且FF，chrome需要手動在漢字間插入空白或軟換列標籤才生效，在chrome遇到的阻力就更大了。

這兩天一直在QQ群與朋友們在聊這問題，最後由一絲給出究極方案：

.test1 {      text-align:justify;      text-justify:distribute-all-lines;/*ie6-8*/      text-align-last:justify;/* ie9*/      -moz-text-align-last:justify;/*ff*/      -webkit-text-align-last:justify;/*chrome 20+*/  }  @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/      .test1:after{          content:".";          display: inline-block;          width:100%;          overflow:hidden;          height:0;      }  }

<!DOCTYPE HTML><html>    <head>        <title>文本左右對齊 by </title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">           <style>                .box1{                background:red;                width:30%;            }            .test1 {                text-align:justify;                text-justify:distribute-all-lines;/*ie6-8*/                text-align-last:justify;/* ie9*/                -moz-text-align-last:justify;/*ff*/                -webkit-text-align-last:justify;/*chrome 20+*/            }            @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/                .test1:after{                    content:".";                    display: inline-block;                    width:100%;                    overflow:hidden;                    height:0;                }            }        </style>    </head>    <body>        <div class="box1">            <div class="test1">姓 名</div>            <div class="test1">姓 名 姓 名</div>            <div class="test1">姓 名 名</div>            <div class="test1">所 在 地</div>            <div class="test1">工 作 單 位</div>        </div>          </body></html>

原文地址：css 文本左右對齊

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More