居中自动宽度div？

Question

我遇到了麻烦,因为我有一个想要居中的div,而我通常被告知要做的就是:

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

麻烦的是,这是因为你想要div是一个固定的宽度.我希望div根据div中的文本调整其大小,并且仍然居中.我试过了:

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

但这没用.当我这样做时,它会拉伸div以填满屏幕.

谁知道该怎么办？

Answer 1

为父母或身体 - text-align:center; 中心区块display:inline-block;

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

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

演示http://jsfiddle.net/RXP4F/

内容可编辑的MDN

Answer 2

你试过这里显示的方法吗？ http://www.tightcss.com/centering/center_variable_width.htm

基本上.把你的内容放在一个浮动的div中,将浮动的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/

Answer 3

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

Answer 4

您可能想尝试 CSSdisplay:table-cell或display:table