44

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

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

问题是，如果您希望 div 是固定宽度，这是为了。我希望 div 根据 div 中的文本调整其大小，并且仍然居中。我试过了：

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

但这没有用。当我这样做时，它会拉伸 div 以填满屏幕。

有人知道在这里做什么吗？

4

9 回答 9

44

对于父块或主体 - 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

于 2013-08-30T04:14:05.610 回答
14

您是否尝试过此处显示的方法？ 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/

于 2013-08-30T04:53:49.387 回答
12

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

于 2015-12-30T20:38:21.373 回答
4

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

于 2013-08-30T04:09:36.653 回答
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;
}
于 2013-08-30T04:20:13.087 回答
1

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

.parent {
  width: 100%;
  text-align: center;
}

.parent div.child {
  display: inline-block;
  text-align: left;
  width: auto;
}

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

于 2018-04-09T19:18:21.537 回答
0

.outer-container { 位置：相对；左：50%；向左飘浮; 明确：两者；边距：10px 0；文本对齐：左；}

.inner-container { 背景：红色；位置：相对；左：-50%；文本对齐：左；}

于 2014-08-03T19:43:27.220 回答
0

编辑：

使用table，它可能更容易设计。然后添加div到tr

于 2013-08-30T04:11:37.433 回答
0

将元素水平居中会有点奇怪，因为功能不是很直观。确实，您需要使用 and 来玩游戏，text-align:center;并且margin:auto,您需要知道何时使用 which。

例如，如果我想将元素（原始文本）的内容（包括按钮和输入）居中，我可以使用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 时，很难知道哪种解决方案最适合您的需求！

不管怎样，我希望这个 JSFiddle 能帮助你搞清楚！

于 2015-11-25T18:34:18.790 回答