CSS------ 表单文本Title左中右对齐

CSS------ 表单文本Title左中右对齐_第1张图片

经常我们会遇到类似上图的表单填写,前面的title有时候会需要居中、两端对齐或者右对齐。特别是两端对齐的情况,我最常用的方法是在文字之间加 这个空格符。

text-align-last 属性

属性规定如何对齐文本的最后一行。

注意:text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。有兼容性问题,请根据情况选择使用。

常见文本对齐示例:

CSS------ 表单文本Title左中右对齐_第2张图片CSS------ 表单文本Title左中右对齐_第3张图片CSS------ 表单文本Title左中右对齐_第4张图片

.box{
            margin: 200px;
            overflow: hidden;
        }
        .box .item{
            margin-bottom: 8px;
            line-height: 32px;
            height: 32px;
        }
        .box .item .label{
            display: inline-block;
            min-width: 80px;
            height: 100%;
            margin-right: 5px;
            text-align: justify; /*必写*/
            text-align-last: justify;/*这里可以写 left、right、center、justify、auto...*/
        }
手机号码: 185********
密码: ******
邮箱地址: pi***@aliyun.com

想了解更多,参见https://www.runoob.com/cssref/css3-pr-text-align-last.html

你可能感兴趣的:(CSS)