如何在css中进行对齐？

Question

图像上的文字对齐方式是什么？

结果我需要：

我试图申请text-align: center;和text-align: left;，但效果是不同的。

我2分的结果：

任何想法？

Answer 1

text-align: justify;是否对齐。另外请注意，字体大小和重量是不同的。

Answer 2

你需要使用text-align + text-align-last

看到https://developer.mozilla.org/fr/docs/Web/CSS/text-align-last和https://css-tricks.com/almanac/properties/t/text-align-last/

p { 
 
    text-align:justify; 
 
    text-align-last:center; 
 
} 
 
/* makup*/ 
 
p { 
 
    width:400px; 
 
    margin:auto; 
 
    padding:1em; 
 
    border:solid black; 
 
    background:gray; 
 
    color:white 
 
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

参见http://caniuse.com/#search=text-align-last

Answer 3

GCyrillus解决方案是正确的，但是请注意ŧ它不支持Safari，所以我想提出一些可能最适合你的方法，如果你希望有多浏览器的支持。

• 膜裹在一<span>标签最后一行
• 检查它的width（例如是260px）和由p的宽度减去它 - 想这是300px（300px - 260px = 40px）
• 给双方padding到span到中心（每边20px）

p { 
 
    text-align: justify; 
 
    width: 300px; 
 
    margin: 0 auto; 
 
    background: black; 
 
    color: white; 
 
    padding: 20px; 
 
    font-family: sans-serif; 
 
} 
 

 
span { 
 
    padding: 0 20px; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident hic impedit reprehenderit voluptates, voluptatibus ut explicabo, repudiandae, reiciendis soluta <span>facere in cum eveniet architecto sint.</span></p>