当前位置:龙哥网 > 网络技术 > CSS文本居中并且两端对齐的样式属性text-align-last(css中文本居中对齐)

CSS文本居中并且两端对齐的样式属性text-align-last(css中文本居中对齐)

longge5个月前 (12-17)网络技术226

CSS中 text-align:justify; 实现文本两端对齐,最后一行居左;text-align:center; 实现文本居中显示,两端不对齐。

由于 CSS 一个选择器不能使用相同的两个属性,text-align 属性也不能设置两个属性值,所以不能同时使用 justifycenter 实现两端对齐居中显示。

要想文本两端对齐且居中显示,需要使用 justify 的附属属性 text-align-lasttext-align-last 属性规定文本最后一行的对齐方式,如居左、居中、居右,该属性只有在 text-align 属性设置为 justify 时才起作用。

示例:

p {
    text-align: justify;
    text-align-last: right;
    -moz-text-align-last: right;  /* 低版本 Firefox 的兼容代码,如Firefox 12.0 */
}

支持的浏览器

支持的浏览器及版本:chrome 47.0+、IE5.5+、Firefox 12.0+(该版本需要添加-moz-前缀)、Opera 34.0+。

不支持的浏览器及版本:Safari浏览器

附:

text-align-last属性的其它属性值:

描述
auto 默认值。最后一行被调整,并向左对齐。
left 最后一行向左对齐。
right 最后一行向右对齐。
center 最后一行居中对齐。
justify 最后一行被调整为两端对齐。
start 最后一行在行开头对齐(如果 text-direction 是从左到右,则向左对齐;如果 text-direction 是从右到左,则向右对齐)。
end 最后一行在行末尾对齐(如果 text-direction 是从左到右,则向右对齐;如果 text-direction 是从右到左,则向左对齐)。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!