如何在CSS中alignment文本?

我怎样才能中心alignment文本?

目前,certificate并不是最后一行的中心。

在Firefox中,这个工作:

 .center-justified { text-align: justify; -moz-text-align-last: center; text-align-last: center; } 

这是一个兼容性表: https : //developer.mozilla.org/en-US/docs/Web/CSS/text-align-last#Browser_compatibility 。 似乎在IE中工作(不需要前缀),但Webkit浏览器不支持它:(

对于寻找文本既是居中又是正确的人来说,下面的内容应该是正确的:

 <div class="center-justified">...lots and lots of text...</div> 

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

 .center-justified { text-align: justify; margin: 0 auto; width: 30em; } 

这里是现场演示 。

这是怎么回事?

  1. text-align: justify; 确保文本填充了div所包含的div的整个宽度。
  2. margin: 0 auto; 实际上是四条规则的简写:
    • 第一个值用于margin-topmargin-bottom规则。 因此,整个事情意味着margin-top: 0; margin-bottom: 0 margin-top: 0; margin-bottom: 0 ,即没有利润率高于或低于div
    • 第二个值用于margin-leftmargin-right规则。 所以这个规则导致了margin-left: auto; margin-right: auto margin-left: auto; margin-right: auto 。 这是一个聪明点:它告诉浏览器把两边可用的空间分配到左右两侧。 结果是居中文本。
      但是,这不会没有工作
  3. width: 30em; ,这限制了div的宽度。 只有在宽度被限制的情况下,才会有一些留空的margin: auto分配。 如果没有这个规则, div将占用所有可用的水平空间,你会失去对中效果。

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

我build议找一个参与他们的W3C工作的Adobe的人,并唠叨他们在下一次会议中提出正确/左/中心的理由。 如果任何人能够推动CSS中的基本排版function,它会是Adobe。

它使用这个代码

 text-align: justify; text-align-last: center; 
 <div class="centered"> <p style="text-align: justify;">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</p>nisl consectetur et.</div> 

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

演示 – 中心alignment段落文本

这一切都为我工作。 我只是想在这个段落的前两行居中,但CENTER不工作,CENTER,DIV,SPAN等全部“中断”段落(即背景格式转到h ***)。

 <style type="text/css"> <!-- .blurow {color:blue;} --> </style> <span class="blurow"> <b>Tri-League Majors Division Tournament!</b><br> <br> <div style="padding:0 40px 0 40px;"> <p style="font-size: 0.85em; text-align:justify; padding:20px 40px 20px 40px; background-color:#dfc;"> Phillies over the Marlins!<br> Congratulations, Coach Princiotto, on a great season.<br> <br> And many thanks to Coaches Charnetski, Clark, Hill, Juan, Lewis, Lomozik, Mowchin and Princiotto for all the hard work and time you folks poured into Little League this year. The impressions you leave make a difference for a lifetime and they are appreciated more than we can say. </p> </div> <br> </span> 

主背景起始为淡黄色。 DIV标签build立了P标签的外边界,从而为该段落设置了不同背景颜色的区域; 即分层效果。

大部分的文本需要certificate是正确的,所以文本alignment被设置为P标签的合理性。 但前两行文字应以中心为准。 不幸的是,CENTER标签已经被拧紧,而之前它曾经工作,现在它只是“打破”段落,整个文本的主体落在段落之外(即在所需的背景颜色区域之外)。 侮辱伤害,页面这一部分的居中效应将整个文本中心(这就是我们如何判断段落已被“破坏”)的中心。

所以,我无法将这两条线路集中起来! 任何人有任何想法,不涉及200行错综复杂的CSS编码?

计算文本行的长度,并创build一个与文本行大小相同的块。 居中块。 如果你有两条线,如果长度不同,你将需要两个方块。 如果你不需要额外的块空间,你可以使用span标签和br标签。 您也可以使用pre标签在块内进行格式化。

你可以这样做:style ='text-align:center;'

垂直见: http : //www.w3schools.com/cssref/pr_pos_vertical-align.asp

这里是块和网页布局的最佳方式,去这里学习2009年开始的新标准。http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#certificate内容属&#x6027;

另外w3schools有很多flex例子。

对于固定宽度的非dynamic文本,解决scheme(不是最好的,但仍然适用于某些情况)。对于只有less量空间将文本“拉伸”到倒数第二行末尾的情况,请使用它。 在段落末尾做一些符号(试验它们的长度)并隐藏它; 适用于段落的绝对位置,或者只是使用填充/修整来修正空闲空间。

良好的兼容性/交叉浏览器的方式来对文本进行中心validation。

示例(之前的段落):

 .paragraph { width:455px; text-align:justify; } .center{ display:block; text-align:center; margin-top:-17px; } 
 <div class="paragraph">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,<br><center>vel scelerisque nisl consectetur et.</center></div> 

简单。 文本alignment:certificate; (使元素alignment)填充左侧:?px; (以元素为中心)

这里的大多数解决scheme都没有考虑到任何forms的响应式文本框。

段落最后一行的文本数量是由浏览器的大小决定的,因此变得非常困难。

我想总之,如果你想要任何一种浏览器/移动响应,这是不可能的:(