即使包裝了左對齊文字，我該如何居中？

我需要將一個左對齊文本塊放在div中間，但我需要將文本塊的視覺寬度居中，而不是塊本身。即使包裝了左對齊文字，我該如何居中？

在許多情況下，這可能是同樣的事情，但想到的情況下，其中的DIV是相當狹窄的（想想移動寬度）和文本是太長，無法在同一行，所以它需要溢出。

在下面的實施例中，我顯示文本塊爲淺藍色以說明，但在實踐中，它們將是顏色作爲父的div（白色）相同。在使用的任何文本中也沒有換行符。

enter image description here

在1A，文字是隻有一條線，它是比文本塊的最大寬度小，所以可以將文本塊設置爲文本的寬度和有ISN沒問題。

2a但是，文本比最大寬度更長，因此會換行到下一行。這樣做的效果是可見文本塊不會再出現居中。

我怎麼能顯示這兩種情況下，作爲1B和2B僅使用HTML和CSS？

編輯1：似乎每個人都告訴我如何實現在1A和2A的情況，但我已經有了。我想在1b和2b中實現這種情況。

編輯2：我使用的代碼基本上是一樣的東西給了大衛在他的鏈接（http://jsfiddle.net/davidThomas/28aef/）。文本區域使用的顏色只是爲了說明這一點。如果您更改爲白色（http://jsfiddle.net/28aef/2/），你可以看到文本塊看起來不再爲中心（即左，右頁邊距不相等）

來源

2012-01-02 JohnGB

那麼......居中容器中的左對齊文本？這可能是困難的，只是* html和css，因爲你似乎也希望文本垂直居中。 – 2012-01-02 15:58:17

@DavidThomas：如果你知道在JS中做這個簡單的方法，我會認爲它是一個備份選項，但如果可能的話，我想避免它。 – JohnGB 2012-01-02 16:09:09

你在用什麼html？ – 2012-01-02 16:13:30

-3

<div style="text-align:center;"> 
    <div style="display:inline; text-align:left; margin:20px;"> <!-- or whatever width you want that block to be at --> 
      Content here 
    </div> 
</div>

基本上，第一個div是您的包含元素。你需要文字對齊中心。

然後，在你的塊格（藍色區域），你需要顯示左內聯和文本對齊，然後設置一個邊距（您想保持它周圍的文本包裹在白色的空間）。

來源

2012-01-02 16:02:35 James

這會給我確切的情況，我在1a和2a中就有這個問題。 – JohnGB 2012-01-02 16:06:14

不，只要您將此寬度設置爲您不希望div超過的寬度，您就會好起來的。 div將看起來像2b。 – James 2012-01-02 16:09:04

文本換行時不起作用。在視覺上，文本區域的寬度（不是div區域）太遠了。 – JohnGB 2012-01-02 16:12:23

我知道這是舊的，但我只是有同樣的問題，我同意這些都解決它。這可能不是100％跨瀏覽器（還沒有完成測試），但它的工作原理！

現在的限制是你必須自己換行，但似乎無論在這種情況下都需要做什麼。

http://jsfiddle.net/28aef/2/

div.textContainer { 
    text-align: center; 
    border: 1px solid #000; 
    height: 100px; 
    padding: 10px 0; 
} 

div.textContainer p { 
    display: inline-block; 
    text-align: left; 
}

來源

2013-02-20 21:54:23 John

這是在Chrome上顯示帶有邊框的左對齊文本。 – JohnGB 2016-07-13 14:29:34

儘管如此，它仍然不能完全集中**，這是這裏的主要問題。 – 2017-01-27 02:55:18

我猜這早已成爲一個非問題在原來的海報，但我有同樣的問題，並使用Google找到答案。以下是我發現的結果。

免責聲明：我不是專家在任何這和其他人可能有一個更優雅的方式來處理這種情況，但它的工作對我的應用程序，並可以適用於其他應用程序，所以我想我會張貼。

<div style = "text-align: center; margin-left: 10%; margin-right: 10%"> 
    <div style = "display: inline-block; text-align: left;"> 
     Desired text goes here. 
    </div> 
</div>

請注意，在上面的第一個div可能不需要和邊距可以移動到第二個div，幾乎沒有變化。根據需要定製百分比或指定像素寬度，並且應該全部設置。希望這可以在某個時候節省一些時間，並且不會產生任何新問題。祝你好運。

來源

2017-08-22 15:04:29 Lokipiece

你會在行動中展示一個這樣的例子，因爲它似乎沒有回答原來的問題。 – JohnGB 2017-08-23 08:42:50

即使包裝了左對齊文字，我該如何居中？

回答

相關問題