使thw两个连续的< div>在容器的中心 [英] make thw two consecutive <div> in the center of the container

问题描述

我有

<div id="container">
     <div id="div2">Title</div>                
     <div id="div3">text text</div>
</div>

其中

#container {
    height:500px;
    width:100%;
    text-align: center;
}

#div2, #div3 {
   width: 50%;
}

无论如何，＃div2和div3都在#container（水平和垂直），它们的高度是可变的？

is there anyway to make the both #div2 and div3 together at the center of the #container (horizontally and vertically) with their height being variable?

推荐答案

这是一个很难回答的问题，因为在所有的现实中，我们不知道你的宽度会接近看起来像一次你放置你需要的内部的两个内部的div。

This is a hard question to answer because in all reality we have no idea what your width is going to even come close to looking like once you place everything you need inside of the two inner divs. However, I do have a few solutions for you that you can definitely benefit from.

第一个选项： The Floater

基本上，这个选项非常简单，除了我们添加三个元素之外， $ c> display，vertical-align和float 。这会导致以下CSS：

Basically, this option is pretty straight forward, we keep everything the same except we add in three elements display, vertical-align, and float. This causes the following CSS:

#container {
    height:500px;
    width:100%;
    text-align: center;
    background-color:blue;
    display: table-cell;
    vertical-align:middle;
}

#div2, #div3 {
    float:left;
    text-align:center;
    width: 50%;
    background-color:orange;

}

我会进一步详细说明为什么我们使用三方法。

I will go into further detail about why we used the three methods in a few moments.

第二个选项： Boxception

我相信这可能是你想要的，我添加的是 margin，display和vertical-align 生成以下CSS代码：

I believe this is probably the one you want, and all I have added is margin, display, and vertical-align which produces the following CSS code:

#container {
    height:500px;
    width:100%;
    text-align: center;
    background-color:blue;
    display: table-cell;
    vertical-align:middle;
}

#div2, #div3 {
    margin: 0 auto;
    text-align:center;
    width: 50%;
    background-color:orange;

}

那么为什么我们使用时髦的表格单元格？这是一个简单的技巧，当与vertical-align组合使用以定位任何在外部div的内部，以正确定位项目在它的中心。

So why do we use the funky, table-cell display? It's a simple trick when combined with vertical-align to position anything on the inside of the outer div to correctly position the items in the center of it.

第一个例子和第二个例子是，float将保持内容总是希望留在div的左侧（在所有的本质，不是真的垂直中心），但有些人喜欢这方面。

The difference between the first example and the second example is that the float will keep the content always wanting to stay on the left side of the div (in all essence, not really centering it vertically) but some people like this aspect.

边距是一个简单的技巧，以确保你可以水平居中的东西。我想指出，这个div只会随着div中的内容扩展（即100％宽度的意义）而扩展。所以如果你没有内容，那么最外面的div实际上不存在，直到内容放在内部div。所以，不要灰心，如果你的div看起来像一个宽度的小线和长的高度;为了更好地表达这一点，这里是一个示例。

The margin is an easy trick to make sure you can center something horizontally. I do want to point out that this div will only expand as the content in the div expands (that is the meaning of 100% width). So if you have no content whatsoever, then the outer most div actually doesn't exist until content is placed within the inner div. So, don't be discouraged if your div looks like a width-wise small line and long height; to better express this, here is an example.

这篇关于使thw两个连续的< div>在容器的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！