如何将div定位在另一个div中？ [英] How can I center a div within another div?

问题描述

我有问题。我有这样的html代码：

 < div id =main_content> 
< div id =container> 
< / div> 
< / div> 
  

css像这样：

  #main_content {
 top：160px; 
 left：160px; 
 width：800px; 
 min-height：500px; 
 height：auto; 
 background-color：＃2185C5; 
 position：relative; 
} 
 
 #container {
 width：auto; 
 height：auto; 
 margin：0 auto; 
 padding：10px; 
 position：relative; 
} 
  

我假设#container将在#main_content内居中。然而，它不是。我只想知道原因和如何使它居中。

解决方案

您需要设置容器的宽度。 （ auto 将无法使用）

  #container {
 width：640px; / *也可以是百分比。* / 
 height：auto; 
 margin：0 auto; 
 padding：10px; 
 position：relative; 
} 
  

查看这些链接

• auto - CSS参考| MDN


• margin - CSS参考| MDN


• 含义 c c c c $ c $


更新 - 操作中@ jsFiddle



I've got an problem. I have the html code like this:

<div id="main_content" >
    <div id="container">
    </div>
</div>

The css like this:

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

I suppose that the #container will be centered within #main_content. However, it is not. I just want to find out the reason and how to make it centered.

解决方案

You need to set the width of the container. (auto won't work)

#container {
    width: 640px; /*can be in percentage also.*/
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links

• auto - CSS reference | MDN
• margin - CSS reference | MDN
• What is the meaning of auto value in a CSS property - StackOverflow

Update - In action @ jsFiddle

这篇关于如何将div定位在另一个div中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！