将 div 定位到没有绝对位置的已经居中的内容答案

【问题标题】：Positioning div right to a already centered content without absolute position将 div 定位到没有绝对位置的已经居中的内容
【发布时间】：2014-08-21 23:17:46
【问题描述】：

我在包装 div 中有两个子 div（内联块）。我希望左侧 div 居中，右侧 div 位于左侧 div 的右侧。

<div id="Wrapper1"><div id="leftElement1">LEFT ELEMENT</div><div id="rightElement1">RIGHT</div></div>

问题是，如果我使用 margin-left 重新定位整个包装器，Left 元素不会在小屏幕尺寸上居中。

如果我将 leftElement1 居中并使用 position: absolute 来定位 rightElement1，Warpper Div 不会根据其子项调整其宽度和高度.

为了更好地理解检查http://jsfiddle.net/aaq810gs/6/

感谢任何帮助！

【问题讨论】：

您是要使左侧 div 的内容居中，还是实际 div 本身居中？
这个不是很清楚...
你的意思是这样吗 - jsfiddle.net/78bt38sv/7 NB。要求“第二个”孩子实际上是“第一个”的孩子
这很难解释，但我认为@Paulie_D 解决了它。我现在正在仔细检查。
不幸的是，@Paulie_D 的解决方案不起作用，因为包装器不会将其高度调整为左右元素的各种高度。

标签： css height positioning center

【解决方案1】：

如果我理解正确，你想要这样的东西：

#rightElement1 {
    background-color: blue;
    position: relative;
    width: 100px;
    display: inline-block;
    height: 50px;
    float: right;
    top: -100px;
}

应用于您的第一个示例。

fiddle

或者是这样的：

#rightElement1 {
    background-color: blue;
    position: fixed;
    width: 100px;
    display: inline-block;
}

fiddle

【讨论】：

【解决方案2】：

我不确定我是否完全理解你的意思，但我认为这样的事情可能对你有用。
- 你最好切换到 %，因为它会在移动设备上运行得更好。
- 第二件事是为#leftElement1 添加margin:0 auto;，使其保持在中间。 #rightElement2 只会粘在右边，因为它是内联块。
现在您可以向包装器添加任何边距，并且它保持不变。

小提琴http://jsfiddle.net/stassel/vzx6fm55/

HTML：

<div id="Wrapper1">
    <div id="leftElement1">LEFT ELEMENT</div>
    <div id="rightElement1">RIGHT</div>
</div>

CSS：

#Wrapper1 {
 width: 90%;
 background-color: red;
 margin: 0 auto;
 white-space: nowrap;
 padding: 10px;
 margin-left:10%;}

#rightElement1 {
 background-color: blue;
 width: 10%;
 display: inline-block;
 height: 50px;}

#leftElement1 {
 background-color: green;
 width: 60%;
 margin:0 auto;
 display: inline-block;}

div {
 height: 100px;
 text-align: center;
 color: white;}

【讨论】：

【解决方案3】：

已解决

感谢您的所有回答！不幸的是，我无法正确描述我的问题，因此没有一个解决方案有效。

终于我自己解决了这个问题。解决方案的关键是另一个居中的外包装，具有固定大小的待居中元素和溢出：可见。内部内容现在与外部包装重叠。

#outerWrapper {
  width: 700px;
  overflow: visible;
  margin: 0 auto;
}

#Wrapper {
  width: 810px;
  background-color: red;
}

http://jsfiddle.net/aaq810gs/9/

【讨论】：