Question

好的，所以我有一组div，我希望将它们叠加在另一个div的另一个嵌套内部。我希望这两个堆叠的内部div在父div中垂直居中，但对于我的生活，我无法让它们居中。这是我的代码：

HTML

<div id="wrapper">
<div id="inner"> 
    <div class="center"><text class="label">Input 1:</text><input type="text"></div>
    <div class="center"><text class="label">Input 2:</text><input type="text"></div>
</div>
<div id="select">
    <select id="selector" multiple>
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
        <option>Option D</option>
        <option>Option E</option>
        <option>Option F</option>
        <option>Option G</option>
    </select>
</div>

CSS

#wrapper {
    margin: 25px auto;
    width: 50%;
    text-align: center;
    background-color: lightblue;
}
#inner {
    display: inline-block;
    width: 300px;
    height: 100px;
    text-align: right;
    vertical-align: middle;
    background-color: yellow;
}
.center {
    padding: 2.5px 5px;
    display: block;
    background-color: green;
    vertical-align: middle;
}
#select {
    display: inline-block;
    background-color: red;
    vertical-align:middle;
}

这是一个正在运行的例子： jsFiddle

我想让两个“中心”类div（jsfiddle中的绿色字段）垂直居中于“内部”div（示例中为黄色）。我已经尝试了我能想到的一切以及我能找到的一切。我甚至尝试将所有内容放在一个div中并制作div display: table-cell;但是元素不是水平居中的。

更好的说，我希望所有三个元素（两个输入和选择）在页面上水平和垂直居中。我怎样才能做到这一点？任何帮助将不胜感激！谢谢！

编辑：

好的，我想我没有给自己解释得很好。我希望黄色div和红色div在同一水平面上，两个绿色div垂直堆叠，垂直居中在黄色div中。 Here是我想要的一个例子。我通过将padding-top: 40px;添加到.inner div来完成此操作。但是我想要实现相同的结果而不需要在填充中放置硬编码的像素数，因为我需要这是动态的并且拉伸做不同的尺寸并保持居中。那有意义吗？我希望这次我能更好地解释自己。感谢大家的帮助！

Answer 1

我有几个选择，所以让我们分开打破它们：

选项一：Yellow Be-Gone!

如果你用Billy Mays的声音读到这个，这可能是你的选择！在这个选项中，我做了一些事情。首先，让我们来看看受影响最大的代码：

#inner {
    display: inline-block;
    width: 300px;
    text-align: right;
    vertical-align: middle;
    background-color: yellow;
}

如果你还没注意到差异，我拿出你的“身高”变量，这样div就会定义自己的高度，并有效地取出它们之间的黄色空间。如果这不是您的选择，那没关系！还有更多来：）

选项二：妈妈说我们可以保留Ol' Yeller

在过去的爆炸中，实际上，1957年更准确地来了这个选项！在这个例子中，我们保持黄色div并成功地将内部div放在中间，并且只要输入是绿色宽度就缩短了。让我们来看看改变代码：

#inner {
    width: 300px;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    background-color: yellow;
    display:table-cell;
}
.center {
    padding: 2.5px 5px;
    display: inline-block;
    background-color: green;
    text-align: center;
}

从内部开始，您会注意到我添加了display：table-cell，它可以显示该div内部的任何内容，使其有点类似于table-cell。为了找到有关这个巧妙技巧的更多信息，Almanac可以更深入。我还补充说，text-align应该居中，而不是正确。正确对齐文本会导致此div内部的任何内容与右侧对齐，而不仅仅是文本，因此这就是我们将其更改为中间的原因。

最后，在中心只需添加一个内联块显示器来创建这个设计，这样一旦div内部的所有内容达到最大长度，div的绿色背景颜色就会停止。我将在第三个选项中详细解释这一点。同样，这两种方法都可以在年历中找到。

选项三：The Green Monster

你能在这个选项中闻到芬威公园的味道吗？我知道我可以。此选项类似于选项2，但它允许内部div达到分配给它的最大宽度。我们如何做到这一点？检查此代码：

.center {
    padding: 2.5px 5px;
    background-color: green;
    text-align: center;
}

它与上面的代码非常相似，实际上，它与取出内联块显示完全相同。

这三个选项中的任何一个都应该能够准确地为您提供所需的信息。一些重点指出，可以肯定的是，淡蓝色和黄色格的宽度都相同，你给我们的例子表明，无论这些div的是不完全一样的宽度，所以只要确保你发现自己上。如果这些都不适合你，请给我发表评论，我可以尽力为你找出其他的东西：）

祝你好运，并且在可以的时候记得使用年历：）

Answer 2

现在应该使用flexbox来进行布局。

如果我理解正确，这可能是一个解决方案：codepen.io/enjikaka/pen/BeHkD

你应该想到的几件事情：

不要在CSS中定位ID（使用＃），它比定位类慢。
- 在CSS中使用类而不是ID来选择元素。
HTML5中没有<text>元素。（？！）使用<label>作为输入字段的标记。
- 使用：<label for="inputOne">Input 1</label><input id="inputOne" type="text">
  - 注意：的值是被标记为<input>的 id 。

Answer 3

不是100％确定这是否是你需要的，但

这是HTML：

<div id="wrapper">
    <div id="inner"> 
        <div class="center"><text class="label">Input 1:</text><input type="text"></div>
        <div class="center"><text class="label">Input 2:</text><input type="text"></div>
                <div id="select">
        <select id="selector" multiple>
            <option>Option A</option>
            <option>Option B</option>
            <option>Option C</option>
            <option>Option D</option>
            <option>Option E</option>
            <option>Option F</option>
            <option>Option G</option>
        </select>
    </div>
    </div>

这是CSS：

#wrapper {
    margin: 25px auto;
    width: 50%;
    text-align: center;
    background-color: lightblue;
}
#inner {
    display: inline-block;
    width: 300px;
    height: 200px;
    text-align: right;
    vertical-align: middle;
    background-color: yellow;
}
.center {
    padding: 2.5px 5px;
    display: block;
    background-color: green;
    vertical-align: middle;
    margin:0px auto;
    width:100px;
}

.center input{ width:100px; }
#select {
    width:100px;
    background-color: red;
    vertical-align:middle;
    margin:0px auto;
}

这将使它全部集中。根据需要调整。编辑**这里是jdFiddle。 http://jsfiddle.net/somdow/eh3UY/ 如果你想要它垂直低一点，你可以添加一些tp边距或顶部填充到包装器。希望这对你有用。祝你好运，欢迎来到SO。

垂直居中2个堆叠和嵌套的div

3 个答案: