Question

无论我尝试做什么，我都无法使我的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;
}

Answer 1

只需删除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/

Answer 2

这是由于您的浮动+没有宽度的奇怪组合。您试图将您希望完全位于左侧的对象居中，这与彼此直接冲突。此外，您的#tiny_mce CSS没有宽度，因此左侧和右侧边距的自动自动功能将无效，因为浏览器不知道块元素的大小。移除浮动并添加宽度将使tiny_mce居中。

TinyMCE不会居中

2 个答案: