將文本對齊框邊的中間

是否可以將動態文本對齊到左邊框的中間？將文本對齊框邊的中間

沒有CSS元素的初始顯示是這樣的，因爲所有的元素都對準同一個邊界：

 Text 
     | 
     Another text

但我試着去達到這樣的效果：

 Text 
     | 
    Another text

我不不知道如何正確解釋它，所以我創建了一個JSFiddle來展示它：https://jsfiddle.net/pkpy27oh/

我想將文本居中和文本上方和下方刻申。當你知道它將採用一個靜態字符串的空間時，可以調整負餘量，但是對於動態字符串，它不能用預定義的負餘量完成。我正在嘗試使用CSS，而不使用JavaScript。

我試圖建立一個最大寬度，將中間的文本對齊到它的容器中，然後將負邊距設置爲該最大寬度的一半，但我不知道是否有更好的方法來實現它。

來源

2016-10-07 Masta

我很困惑。也許這沒有什麼意義，或者我錯過了什麼？ 'text-align：center'有什麼問題？ – Albzi

@Albzi'text-align：center;'不會以''爲中心，因爲它沒有文本，並且塊不是內聯或內聯塊。但是，如果他確實使邊界線內聯塊，那麼它將是中心 – zgood

你的意思是這樣嗎？ https://jsfiddle.net/pkpy27oh/10/ – TylerH

您可以使用display：inline-block的和文本對齊：中心：

Example Updated

<div class="container"> 
    <div class="inline-block"> 
    <div>Text</div> 
    <div style="border-left: 1px solid #000; display: inline-block;">&nbsp;</div> 
    <div>Longer text</div> 
    </div> 
</div> 

.container { 
    margin: 10px 50px; 
    text-align: left; 
} 

.inline-block { 
    display: inline-block; 
    text-align: center; 
    transform: translateX(-50%); 
}

來源

2016-10-07 15:32:09

這是一個奇怪的要求是肯定的。如果transform:translateX是可以接受你的要求，你可以試試這個：

.container { 
 
    margin: 10px 50px; 
 
} 
 

 
.offset { 
 
    display:inline-block; 
 
    transform: translateX(-50%); 
 
}

Problem: 
 

 
<div class="container"> 
 
    <div class="offset">Text</div> 
 
    <div style="border-left: 1px solid #000;">&nbsp;</div> 
 
    <div class="offset">Longer text</div> 
 
</div> 
 

 
Expected result: 
 

 
<div class="container"> 
 
    <div style="margin-left: -15px">Text</div> 
 
    <div style="border-left: 1px solid #000;">&nbsp;</div> 
 
    <div style="margin-left: -35px">Longer text</div> 
 
</div>

的display:inline-block崩潰元素降到最短寬度和transform:translateX(-50%)其寬度的一半抵消它。

來源

2016-10-07 15:32:45

只需將您的容器中的物品居中，並給邊框寬度爲1px的div。

<div class="container" style="text-align: center;"> 
    <div>Text</div> 
    <div style="border-left: 1px solid #000; width: 1px; margin-left: auto; margin-right: auto;">&nbsp;</div> 
    <div>Longer text</div> 
</div>

https://jsfiddle.net/pkpy27oh/8/

來源

2016-10-07 15:33:34 Andrew

將文本對齊框邊的中間

回答

相關問題