如何在固定寬度和邊距的div中將div水平居中？
[英]How to center divs within a div horizontally with fixed width and margins?
問題描述
是否可以在具有固定寬度高度和邊距的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;
}
謝謝您的加油！
4 個解決方案
解決方案1
0 2014-05-26 04:27:47
首先， 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 。
解決方案2
0 2014-05-26 04:37:44
用這個 ..
#microcontainers{
width: 400px;
height: 600px;
border: #999 1px solid;
margin: auto;
padding: 15px 15px 15px 15px;
text-align: center;
display: block;
}
解決方案3
0 2014-05-26 04:46:12
如果要水平居中並水平顯示，可以使用下一個標記：
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;
}
解決方案4
0 已采納 2014-05-26 05:23:13
嗨喬，我想你看起來像這樣：- 演示
我已經對您的CSS進行了一些更改，我增加了幾點：-
- 我給您的父div #maincontainer和
display:block＆text-align:center
dispaly:inline-block向您的孩子div dispaly:inline-block #microcontainers
因此，通過這種方法，您可以獲得所需的結果，並且可以刪除添加多余的div ，這些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內並排居中對齊2個固定寬度的div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.