Question

是否可以在具有固定宽度高度和边距的div内水平居中几个div？

这是我的HTML：

<html>

   <div id="maincontainer">

         <div id="microcontainers"></div>

         <div id="microcontainers"></div>

         <div id="microcontainers"></div>

         <div id="microcontainers"></div>
   </div>

</html>

和CSS：

#maincontainer{
width:1120px;
height:auto;
background-color:#E4E4E4;
margin-left: auto;
margin-right: auto;
margin-top: 124px;
padding: 40px 40px 40px 40px;
overflow: hidden;    
}

#microcontainers{
    width: 400px;
    height: 600px;
    border:  #999 1px solid;
    margin: 40px 40px 40px 40px;
    padding: 15px 15px 15px 15px;
    text-align: center;
    float: left;
    display: block;
}

谢谢你，更多力量！

Answer 1

首先id是一个唯一元素，您不能多次使用相同的ID。不使用id，而是使用class。为了对齐div的中心，你可以创建一个主div，它包含所有其他div，例如：

<div id="main">
  <div class="microcontainers"</div>
  <div class="microcontainers"</div>
  <div class="microcontainers"</div>
</div>

将宽度定义为#main并使用margin:0 auto;

#main {
  width:1000px;
  height:auto;
  margin:0 auto;
}

.microcontainers {
  width: 400px;
  height: 600px;
  border:  #999 1px solid;
  margin: 40px 40px 40px 40px;
  padding: 15px 15px 15px 15px;
  text-align: center;
  float: left;
  display: block;
}

使用此方法，您可以将所有元素置于#main内。

Answer 2

使用此..


    #microcontainers{
        width: 400px;
        height: 600px;
        border:  #999 1px solid;
        margin: auto;
        padding: 15px 15px 15px 15px;
        text-align: center;
        display: block;
    }

Answer 3

如果要水平居中并水平显示，可以使用下一个标记：

<强> HTML

<div class="Macrocontainer">
        <div class="microcontainers">
        </div>
        <div class="microcontainers">
        </div>
        <div class="microcontainers">
        </div>
        <div class="microcontainers">
        </div>
    </div>

<强> CSS

   .microcontainers {
        width: 400px;
        height: 600px;
        border: #999 1px solid;
        margin: 40px 40px 40px 40px;
        padding: 15px 15px 15px 15px;
        text-align: center;
        float: left;
        display: block;
    }

    .Macrocontainer {
        overflow:auto;
        width:3000px; /*set the width desired to accomodate the quantity of divs needed*/
    }

如果你想水平居中每个div但是垂直显示你可以使用下一个标记

<强> HTML

<div class="Macrocontainer">
        <div class="Container">
            <div class="CenterDiv">
                <div class="microcontainers">
                </div>
            </div>
        </div>
        <div class="Container">
            <div class="CenterDiv">
                <div class="microcontainers">
                </div>
            </div>
        </div>
        <div class="Container">
            <div class="CenterDiv">
                <div class="microcontainers">
                </div>
            </div>
        </div>
        <div class="Container">
            <div class="CenterDiv">
                <div class="microcontainers">
                </div>
            </div>
        </div>
    </div>

<强> CSS

    .microcontainers {
        width: 400px;
        height: 600px;
        border: #999 1px solid;
        margin: 40px 40px 40px 40px;
        padding: 15px 15px 15px 15px;
        text-align: center;
        display: block;
    }

    .Macrocontainer {
        width: 100%;
    }

    .Container {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .CenterDiv {
        margin-left: auto;
        margin-right: auto;
        width: 400px;
    }

Answer 4

你好Joe我认为你看起来像这样： - DEMO

我已经取得了一些改进，你的css我添加了几点： -

我给了display:block＆amp; text-align:center到您的父div #maincontainer ＆amp;

dispaly:inline-block给您的孩子div #microcontainers

通过这种方法，您可以获得所需的结果，并且可以删除添加额外的 div ，它们将始终位于中心...

<强> CSS

#maincontainer {
    background-color: #E4E4E4;
    display: block;
    height: auto;
    overflow: hidden;
    padding: 40px;
    text-align: center;
    width: 800px;
}


#microcontainers {
    border: 1px solid #999999;
    display: inline-block;
    height: 100px;
    margin: 0;
    padding: 15px;
    width: 50px;
}

如何使用固定宽度和边距水平居中div内的div？

4 个答案: