我有四个div(所有相同的大小)我已将它们分组为2个块,类块blocka都包含在内部容器body-content浮动所有块到左边所以当我的页面宽度改变时,这些块(2个) )彼此对齐。 我现在想要的是那些div正好位于main容器的中间位置。
一切都很好。 所有我需要它的body content坐在main的中间,而blocka都集中在body-content的中间
.main { max-width: 100%; margin-left: 240px; background-color: ; } .body-content { background-color: white; margin: 0 auto; width: 95%; padding: 15px; border: 1px solid grey; height: 100px; } .blocka { float: left; margin: 0 auto; }<div class="main"> <div class="body-content"> <div class="blocka"> <div class="body-content-items">Add All</div> <div class="body-content-items">Add All</div> </div> <div class="blocka"> <div class="body-content-items">Add All</div> <div class="body-content-items">Add All</div> </div> </div> </div>I have four divs(all same sizes) i have grouped them into to blocks of 2 with classes blocka both contained in an inner container body-content float all the blocks to the left so when my page width changes,these the blocks(of 2) aligned under each other. I am trying to get now is that those divs sit right at the middle of the main container.
Everything response well. All i need it the class body content sit at the middle of main while blocka all center themselves in the middle of body-content
.main { max-width: 100%; margin-left: 240px; background-color: ; } .body-content { background-color: white; margin: 0 auto; width: 95%; padding: 15px; border: 1px solid grey; height: 100px; } .blocka { float: left; margin: 0 auto; }<div class="main"> <div class="body-content"> <div class="blocka"> <div class="body-content-items">Add All</div> <div class="body-content-items">Add All</div> </div> <div class="blocka"> <div class="body-content-items">Add All</div> <div class="body-content-items">Add All</div> </div> </div> </div>最满意答案
我真的不明白所以请澄清一下。
在这里, body-content坐在main的中间,而blocka坐在body-content的中间。 你没有说main位置在哪里,所以我把它放在了右边。
颜色用于可视化,我减少了body-content的宽度,以查看其背后的main内容
.main { max-width: 80%; margin: 0 auto; background-color: red; } .body-content { background-color: blue; margin: 0 auto; width: 50%; padding: 15px; border: 1px solid grey; height: 100px; text-align:center; }<div class="main"> <div class="body-content"> <div class="blocka"> <div class="body-content-items">Add All</div> <div class="body-content-items">Add All</div> </div> <div class="blocka"> <div class="body-content-items">Add All</div> <div class="body-content-items">Add All</div> </div> </div> </div>I don't really understand so please clarify.
Here you go, the body-content is sitting in the middle of main, while blocka is sitting in the middle of body-content. You didn't said where will the main be position so I left it in the right-side.
Colors are for visualization and I reduced the body-content's width to see the main behind it
.main { max-width: 80%; margin: 0 auto; background-color: red; } .body-content { background-color: blue; margin: 0 auto; width: 50%; padding: 15px; border: 1px solid grey; height: 100px; text-align:center; }<div class="main"> <div class="body-content"> <div class="blocka"> <div class="body-content-items">Add All</div> <div class="body-content-items">Add All</div> </div> <div class="blocka"> <div class="body-content-items">Add All</div> <div class="body-content-items">Add All</div> </div> </div> </div>
更多推荐
发布评论