如何在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>