2011-12-08 73 views
1

無論我嘗試做什麼,我都無法讓我的tinyMCE文本編輯器正確居中。TinyMCE不會中心

這裏的標記:

<div id="container">  
<form method="POST" id="tiny_mce"><div class="title">YOUR POSTING</div><br> 
    Title:<br /> 
    <input type="text" name="title" /><br /><br /> 
    Your words:<br /> 
    <textarea name="words" class="tinymce" cols="30" rows="10"></textarea> 
    <br /><br /> 
    <input type="submit" name="submit" value="SUBMIT" /> 
    </form> 
</div> 

CSS:

*{ 
margin: 0; 
padding: 0; 

} 
body,html{ 
    margin:0 auto; 

} 
#container{ 
width:1200px; 
border:0px solid black; 
height:600px; 
margin:0 auto; 
} 
#tiny_mce{ 
display:block !important; 
float:left; 
margin-left:auto; 
margin-right:auto; 
} 
#tiny_mce input{ 
float:left; 
} 

回答

1

這是由於您的浮動+沒有寬度的奇怪的組合。您試圖將您希望完全放在左邊的物體居中,這是彼此直接衝突的。此外,您的#tiny_mce CSS沒有寬度,因此瀏覽器不知道塊元素的大小,因此左側和右側邊距上的自動自動不起作用。刪除浮動並添加寬度將以tiny_mce爲中心。

+0

感謝,CSS更有意義了...哈哈 – user701510

3

只需刪除float:left並將寬度添加到tiny_mce即可。它會工作。

#tiny_mce { 
    display: block !important; 
    margin-left: auto; 
    margin-right: auto; 
    width: 600px;  // You can give anything 
} 

http://jsfiddle.net/Nw8SJ/