2013-08-30 183 views
29

我有麻煩,因爲我有一個div我想中心和我所 通常被告知這樣做是這樣的:居中自動寬度div?

width: 700px; 
margin-left: auto; 
margin-right: auto; 

麻煩的是,這是因爲如果你想股利是一個固定的寬度。我希望div 根據div中的文字調整其大小,並仍居中。我嘗試過:

width: auto; 
margin-left: auto; 
margin-right: auto; 

但這沒有奏效。當我這樣做時,它會伸展div來填滿屏幕。

任何人都知道該怎麼辦?

+0

給你的div一定的寬度和更好的,只要你想調整你的文字! div會根據你給的位置保持不變,如果你使用text-align:center; –

+0

這就是我試圖避免的 - 給我的div一個固定的寬度 –

+0

@丹克你可以粘貼你的HTML以及創建一個小提琴,這將有助於輕鬆理解。 –

回答

1

你可能想嘗試的CSS display:table-celldisplay:table

+0

Right - 我試過了display:table屬性,但是刪除了我在div中的列... –

0

編輯:

使用table,它可能是更容易的風格。然後將div添加到tr

+0

我其實有列在我的div中,並且由於寬度:自動,列伸出來填滿屏幕。列的寬度是固定的 - 但父div是寬度:auto –

+0

我試過display:table - 但是b/c我的分區內有列,它不起作用。列被刪除,只有一個出現在頁面的中心。 –

36

對於父塊或身體 - text-align:center; for centerd block- display:inline-block;

.center{display:inline-block;background:red} 
body{text-align:center} 

<div class="center"> 
    <p contenteditable="true">write text</p> 
</div> 

DEMO http://jsfiddle.net/RXP4F/

Content Editable MDN

+0

不幸的是沒有工作 - 但謝謝你! –

+2

工作很好!謝謝! – tibelchior

+1

無法正常工作。什麼是可以信賴的? 和body標籤與問題無關。 –

3

試試這個結構。

<div class="container"> 
    <div class="center_div"> 

    </div> 
</div> 



.container{ 
    float: left; 
    left: 50%; 
    position: relative; 
} 
.center_div{ 
    position: relative; 
    left: -50%; 
    float: left; 
} 
+0

謝謝 - 但我認爲b/c我在我的「center_div」中有與該CSS無法很好地工作的列。我的容器div是#Body,我試圖以寬度居中的div:auto是我的#Content。 –

8

你試過了這裏顯示的方法嗎? http://www.tightcss.com/centering/center_variable_width.htm

基本上。 把你的內容的浮動DIV 把那漂浮在另一個DIV浮動左格

把裏面的50%,在外層div相對位置留給 放:-50%,對內部的div相對位置

最後,巢一切都在一個更DIV與溢出:隱藏

.outermost-div{ 
    background-color: blue; 
    overflow:hidden;  
} 

.inner-div{ 
    float:left; 
    left:50%; 
    background-color: yellow; 
    position: relative; 
} 

.centerthisdiv { 
    position:relative; 
    left: -50%; 
    background-color: green; 
    float:right; 
    width:auto; 
} 

這裏是我的jsfiddle示範: http://jsfiddle.net/wbhyX/1/

+0

這應該是我接受的答案^^謝謝@shinjin –

0

.outer-container {0}位置:相對; 剩餘:50%; float:left; 明確:均; margin:10px 0; text-align:left; }

.inner-container { background:red; 位置:相對; 剩餘:-50%; text-align:left; }

0

水平居中一個元素可能會有點奇怪,因爲功能不是很直觀。真的,你需要與text-align:center;margin:auto,玩遊戲,你需要知道什麼時候使用哪個。

例如,如果我想要將元素(原始文本)的內容居中,包括按鈕和輸入,我可以使用text-align:center

.text-center { 
 
    text-align:center; 
 
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" > 
 
    My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button> 
 
</div>

如果添加其他元素,我們的容器,這些元素將其寬度被迫到100%。這有助於我們仿效它是以中心爲中心的,因爲從技術上講,100%是中心的!傻,不是嗎?

.text-center { 
 
    text-align:center; 
 
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" > 
 
    My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button> 
 
    <p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p> 
 
</div>

如果width屬性雖然定義,那麼你可以使用margin: auto風格父內居中。

<div style="margin:auto;border:1px solid black;width:300px;" > 
 
    I am centered! 
 
</div>

您需要確定哪些解決方案是最適合你。我希望我可以提供更多幫助,但是當您沒有爲您提供HTML問題時,很難知道哪種解決方案最適合您的需求!

無論哪種方式,我希望this JSFiddle幫助清理!

2

使用保證金: 0px auto; and display: table; 有例如: https://jsfiddle.net/da8p4zdr/