對齊文本行，所以它的中心將是容器寬度的70％

Question

我想對齊字符串的文本，以便該字符串的中心位於容器寬度的70％的像素處。除了該字符串外，容器中的所有其他文本行通常都是（左對齊）。 例如，如果容器寬度爲300px，文本的中心位於像素210.

要達到這個目標的最佳方法是什麼？ 有沒有辦法做到這一點，如果它與更正常（左）對齊文本共享行？

更新： 恐怕我不清楚我的問題。 Applogies給所有花時間回答的人。 更清晰的是，容器包含許多文本行，通常都是（左對齊）。只有一個我想定位的字符串，所以它的中心位於容器寬度的70％。

Answer 1

您可以假冒該對齊放置文本在內部跨度的容器和立場，因此

跨越容器內：

position: relative; 

在內跨度：

position: absolute; 
    left: 70%; 
    transform: translate(-50%, 0); 

請參閱here

Answer 2

這個怎麼樣？

#thediv { 
 
    background-color: lightgray; 
 
    width: 70%; 
 
    height: 100px; 
 
} 
 

 
.container { 
 
    background-color: gray; 
 
    height: 200px; 
 
}

<div class="container"> 
 
    <center> 
 
    <div id="thediv"> 
 
    text text text text text text text text 
 
    text text text text text text text text 
 
    text text text text text text text text 
 
    text text text text text text text text 
 
    </div> 
 
    </center> 
 
</div>

Answer 3

這可能會有幫助。 相應地更改::before的寬度。讓容器取其父寬度。

<!-- HTML --> 
<div class="container"> 
    Text 
</div> 

// CSS 
.container { 
    text-align: center; 
} 
.container::before { 
    content: ''; 
    width: 30%; 
    display: inline-block; 
} 

Codepen

希望這有助於。

謝謝！