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>

DEMO http://jsfiddle.net/RXP4F/

Content Editable MDN

Answer 2

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

基本上。把你的内容放在一个浮动的div中把那个浮动的div放在另一个浮动的div中

左边：50％，相对于外部div的位置左边：-50％，相对于内部div的位置

最后，使用overflow：hidden

将所有内容嵌套在一个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

您可能想尝试使用CSS display:table-cell或display:table

Answer 5

试试这个结构。

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

    </div>
</div>



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

Answer 6

<强>编辑：

使用table，风格可能更容易。然后将div添加到tr

中

Answer 7

.outer-container { 位置：相对; 左：50％; 向左飘浮; 明确：两者; 保证金：10px 0; text-align：left; }

.inner-container { 背景：红色; 位置：相对; 左：-50％; text-align：left; }

Answer 8

水平对中元素可能会有点奇怪，因为功能不是很直观。实际上，您需要使用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>

如果您的宽度属性已定义，则可以使用margin: auto样式将其置于父级中心。

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

您需要确定哪种解决方案最适合您。我希望我能提供更多帮助，但是当您没有为您提供HTML问题时，很难知道哪种解决方案最适合您的需求！

无论哪种方式，我希望this JSFiddle有助于澄清事情！

Answer 9

zloctb在2013年8月30日4:14的答案实际上原则上有效，但不完整。如果您希望元素宽度基于其中的内容为“auto”并且在其父BUT中居中且CHILD元素内的内容左对齐，请执行以下操作（因为它确实是最简单的方法）：

stableFit(log_returnsSP500,alpha=1.75,beta=0,gamma=1,delta=0,type=c("mle"),
      doplot=TRUE)

Title:
 Stable Parameter Estimation

 Call:
.mleStableFit(x = x, alpha = Alpha, beta = Beta, gamma = Gamma, 
delta = Delta, doplot = doplot, control = control, trace = trace,
title = title, description = description)

Model:
 Stable Distribution

Estimated Parameter(s):
    alpha          beta         gamma         delta 
 1.6211874757 -0.1077639387  0.0057637299  0.0006406242

（显然，如果您只是希望所有内容都严格居中，那么您就不需要子元素的代码。）

Answer 10

如果您有很多<div>标签，或者您正在运行具有布局和局部视图的大型应用程序，则可能会非常棘手。我自己遇到麻烦了。

我发现可以无限地工作的是将左或右设置为50％，并且位置绝对。至少值得一试，但可能不适用于某些工作流程。

.centered {
   left: 50%;
   position: absolute;
}

居中自动宽度div？

10 个答案: