我有這個代碼：我的小提琴：https://jsfiddle.net/v5j3L6e9/基本上，我有 6 個盒子（帶有圖像和文本的 Div）。我試圖將“底部區(qū)域”居中（例如，這可以是液體布局，頂部區(qū)域作為標(biāo)題，然后是主要內(nèi)容，具有最大寬度）這個想法是“bottomzone”具有固定的最大寬度，因此當(dāng)分辨率較大時，它應(yīng)該保持居中（同時“topzone”將隨著分辨率寬度而擴展）。我不明白如何在不破壞盒子定位的情況下使底部區(qū)域居中（盒子必須保持分布并保持居中）。另外，不確定我是否做了一個好的元素層次結(jié)構(gòu)（在 html+css 上相當(dāng)新）。謝謝。.topzone { height: 100px; background-color: blue;}.topzone h1 { text-align: center;}.bottomzone { margin-top: 50px; max-width: 800px; text-align: center; display: flex; justify-content: center; flex-wrap: wrap;}.bottomzone div { position: relative; width: 30%; margin: 0px 10px 0px 10px;}.bottomzone img { width: 100%;}.bottomzone div h3 { position: absolute; top: 20px; width: 100%;}<div class="topzone"> <h1>Title 1</h1> <h2>Title 2</h2></div><div class="bottomzone"> <div> <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box"> <h3>Box 1</h3> </div> <div> <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box"> <h3>Box 2</h3> </div> <div> <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box"> <h3>Box 3</h3> </div> <div> <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box"> <h3>Box 4</h3> </div> <div> <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box"> <h3>Box 5</h3> </div> <div> <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box"> <h3>Box 6</h3> </div></div>
2 回答
一只名叫tom的貓
TA貢獻(xiàn)1906條經(jīng)驗 獲得超3個贊
如果您想使用彈性盒，您可以簡單地使用包裝元素centering-wrapper并設(shè)置align-items: center和flex-direction: column使項目水平居中。
.centering-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.topzone {
height: 100px;
background-color: blue;
}
.topzone h1 {
text-align: center;
}
.bottomzone {
margin-top: 50px;
max-width: 800px;
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.bottomzone div {
position: relative;
width: 30%;
margin: 0px 10px 0px 10px;
}
.bottomzone img {
width: 100%;
}
.bottomzone div h3 {
position: absolute;
top: 20px;
width: 100%;
}
<div class="topzone">
<h1>Title 1</h1>
<h2>Title 2</h2>
</div>
<div class="centering-wrapper">
<div class="bottomzone">
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 1</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 2</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 3</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 4</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 5</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 6</h3>
</div>
</div>
</div>
江戶川亂折騰
TA貢獻(xiàn)1851條經(jīng)驗 獲得超5個贊
將這些 CSS 規(guī)則添加到.bottomzone選擇器：
margin-left: auto;
margin-right: auto;
這可確保瀏覽器計算出相同的左右邊距空間量。由于您在代碼中使用margin-top，因此可以像這樣簡化它：
.bottomzone {
margin: 50px auto 0;
...
}
其中 0 表示下邊距。
- 2 回答
- 0 關(guān)注
- 121 瀏覽
添加回答
舉報
0/150
提交
取消