300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > css 最后一行文字对齐 如何在CSS中居中对齐最后一行文本?

css 最后一行文字对齐 如何在CSS中居中对齐最后一行文本?

时间:2020-05-07 00:00:29

相关推荐

css 最后一行文字对齐 如何在CSS中居中对齐最后一行文本?

9 个答案:

答案 0 :(得分:124)

.center-justified {

text-align: justify;

text-align-last: center;

}

适用于除Safari(包括Mac和iOS)以外的所有浏览器,包括Internet Explorer。

同样在Internet Explorer中,仅适用于text-align: justify(不允许text-align)和start以及end的其他值。

答案 1 :(得分:61)

对于希望获取两者居中和对齐的文字的人,以下内容应该有效:

...lots and lots of text...

使用以下CSS规则(根据需要调整width属性):

.center-justified {

text-align: justify;

margin: 0 auto;

width: 30em;

}

发生了什么事?

text-align: justify;确保文字填满其所附的div的整个宽度。

margin: 0 auto;实际上是四条规则的简写:

第一个值用于margin-top和margin-bottom规则。

因此,整个事情意味着margin-top: 0; margin-bottom: 0,即div之上或之下没有边距。

第二个值用于margin-left和margin-right规则。

因此,此规则会生成margin-left: auto; margin-right: auto。

这是一个聪明的一点:它告诉浏览器采取两侧可用的空间并在左右均匀分布。

结果是居中的文字

但是,如果没有,这将无效

width: 30em;,它限制了div的宽度。

只有当宽度受到限制时,才会留下一些空白,以便margin: auto分配。

如果没有这个规则,div将占用所有可用的水平空间,并且您将失去居中效果。

醇>

答案 2 :(得分:31)

使用此代码

text-align: justify; text-align-last: center;

答案 3 :(得分:7)

似乎没有办法。您可以使用对齐方式伪造它,然后将最后一行文本包装在一个范围内,并将其设置为文本对齐中心。它适用于小块文本,但不适用于大量文本或动态文本。

我建议在Adobe找一个参与他们W3C工作的人并唠叨他们在下次会议中提出左/右/中心理由。如果有人能够推动CSS中的基本排版功能,那就是Adobe。

答案 4 :(得分:3)

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque

nisl consectetur et.

我能够通过将内容包装在div标签中并应用属性text-align:center来实现结果。在div标签之后,我立即将内容包装在段落标记和应用属性中,text-align:justify。为了使最后一行居中,我将其从段落标记中排除,然后回退到div标记中应用的属性。你只需要在最后一行描述你想要多少个单词。我从小提琴中加入了一个演示。希望这可以帮助。

答案 5 :(得分:0)

此处的大多数解决方案都没有考虑任何类型的自适应文本框。

段落最后一行的文字数量取决于观众浏览器的大小,因此变得非常困难。

我想简而言之,如果你想要任何类型的浏览器/移动响应,这是不可能的:(

答案 6 :(得分:0)

简单。

文字对齐:对齐; (使元素对齐)

填充左:?px; (使元素居中)

答案 7 :(得分:0)

计算文本行的长度并创建一个大小相同的块

作为文本行。中心块。如果你有两条线,如果长度不同,则需要两个区块。如果您不希望块中有额外的空格,则可以使用span标记和br标记。

您还可以使用pre标签在块内进行格式化。

你可以这样做:

风格=“文本对齐:中心;”

w3schools也有很多灵活的例子。

答案 8 :(得分:0)

对于具有固定宽度的非动态文本的解决方案(不是最好的,但仍然适用于某些情况)。对于有一点空间“拉伸”文本到结尾的情况,这种情况很有用该

倒数第二行。在段落的末尾做一些符号(试验它们的长度)并隐藏它;适用于段落绝对位置或只是用填充/游戏来纠正自由空间。

用于居中对齐文本的良好的兼容性/交叉浏览方式。

示例(之前的段落):

.paragraph {

width:455px;

text-align:justify;

}

.center{

display:block;

text-align:center;

margin-top:-17px;

}

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,vel scelerisque nisl consectetur et.

修复后:

.paragraph {

width:455px;

text-align:justify;

position:relative;

}

.center{

display:block;

text-align:center;

margin-top:-17px;

}

.paragraph b{

opacity:0;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

-moz-opacity: 0;

-khtml-opacity: 0;

}

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,__vel scelerisque nisl consectetur et.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。