在文本框中保留文本片段

我正在嘗試獲取一些我動態分配的文本，以便在盒子中居中對齊和垂直對齊。

到目前爲止，我有：

HTML

<body> 
    <div class="slide"> 
    <span class="content"> 
     <b>Hello. This text needs to be:</b><br><br> 
     - left-aligned but <br> 
     - centered in the grey box<br> 
     - even if it changes<br> 
     - the center of the white box <br> 
     should equal center of grey one. 
    </span> 
    </div> 
    </body>

CSS

.slide { 
    position:relative; 
    background-color: #ddd; 
    width: 300px; 
    height: 300px 
} 

.content { 
    position: absolute; 
    top: 30%; 
    left: 15%; 
    background-color: #fff; 
}

輸出

Output

這並不是因爲如果工作文字發生變化，它不再是中心。任何人有任何想法如何解決這個問題？

http://jsbin.com/uyiFiwI/23/edit

來源

2013-08-18 Sean McClory

所以'.slide'始終是300x300像素？ –

嗨，你爲什麼不使用'overflow：scroll;'屬性。如果你不想這樣做，那麼你可以考慮使用'font-size：.8em;'！但第一種選擇更好。第二個可能是愚蠢的。 –

是的幻燈片總是300 x 300.希望如果只有少量的文字，它會在中間打耳光。感謝下面的答案。雖然非常接近，但它們並不在那裏。 –

這你想要做什麼，但依靠其不受舊的瀏覽器支持display: table-cell。

.slide { 
    position:relative; 
    background-color: #ddd; 
    display: table-cell; 
    width: 300px; 
    height: 300px; 
    text-align: center; 
    vertical-align: middle; 
} 

.content { 
    background-color: #fff; 
    display: inline-block; 
    width: auto; 
    height: auto; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: left; 
}

我不認爲有一種解決方案適用於不改變HTML的舊瀏覽器。

編輯：你並不需要一個固定的高度.content

編輯：刪除用於調試border: 1px solid gray。

編輯：根據@Shomz建議進行更改（使用新的不同標準，寬度爲.content）。

來源

2013-08-18 06:14:26

謝謝。儘管您的解決方案完美垂直。如果只有少量的文本，它會偏離一邊。即白色框的寬度應該是內部文本的大小。 http://jsbin.com/uyiFiwI/42/edit - 以某種方式結合這兩個答案會很棒。 –

你可以合併它們，添加'display：inline-block; width：auto;'到內容元素.http：//jsbin.com/uyiFiwI/43/edit – Shomz

是的。 Shomz。這正是我想要的CSS。儘管可能不是瀏覽器友好的。 –

如果你不介意的滑塊高度，這樣的事情會完美地各種場合工作：

div.slide { 
    position:relative; 
    background-color: #ddd; 
    text-align: center; 
} 

div.content { 
    text-align: left; 
    position: relative; 
    display: inline-block; 
    margin: 10% auto; 
    background-color: #fff; 
}

http://jsbin.com/uyiFiwI/28/edit

但是，如果你的.slide DIV需要有固定的高度，您可能需要使用JavaScript來正確計算內容div的渲染高度，或者使用hacky CSS，這可能會或可能不適用於所有瀏覽器，如@David建議的那樣。

來源

2013-08-18 06:19:12 Shomz

謝謝。不幸的是，幻燈片的高度是固定的，但我可以控制幻燈片上的文本數量。我喜歡你的解決方案水平居中文本的方式，但如果只有一行並且高度固定，它就不再有效（正如你所說的那樣）。 –

是的，這些事情可能是一個痛苦，把CSS推到極限。就個人而言，我會添加一行JavaScript並且再也不用擔心。 :) – Shomz

接受 - http://jsbin.com/uyiFiwI/43/edit –

如果您願意稍微更改標記，則使用列表可以幫助您清理一些換行符和間距問題。

將@display: table-cell與@David-SkyMesh在答案中的結合，會給你一個更容易管理的列表。

HTML

<div class="slide"> 
    <div class="content"> 
     <b>Hello. This text needs to be:</b> 
     <ul> 
     <li>left-aligned but</li> 
     <li>centered in the grey box</li> 
     <li>even if it changes</li> 
     <li>the center of the white box this this is really long text not the gray one should equal center of grey one.</li> 
     </ul> 
    </div> 
    </div>

CSS

.slide { 
    position:relative; 
    background-color: #ddd; 
    width: 300px; 
    height: 300px; 
    padding: 20px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

.content > ul > li:nth-child(1) { 
    margin-top: 10px; 
} 

.content { 
    display: block; 
    margin: auto; 
    background-color: #fff; 
    text-align: left; 
} 

.content ul { 
    margin: 0; 
    padding: 0; 
    padding-left: 20px; 
}

Demo - jsBin

來源

2013-08-18 07:03:21 dc5

需要做它沒有列表，但與清單這個解決方案也肯定有效。 –

在文本框中保留文本片段

回答

相關問題