This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4个答案)
Center align container and left align child elements
(9个答案)
How to center a flex container but left-align flex items
(3个答案)
2年前关闭。
我敢肯定有一个简单的答案,但我只是想不通。我正在尝试提出以下布局:
![html - 用左对齐内容集中div-LMLPHP html - 用左对齐内容集中div-LMLPHP]()
红色框是一个div,它应动态增长以适合内容,并应位于页面的中心。它的宽度应等于水平可容纳的黄色div的数目。黄色框是div,应对齐。到目前为止,我已经尝试将红色div在设置为text-align:center的容器div中显示为内联块,将黄色div设置为显示内联块。黄色的div正确显示并随着浏览器调整大小而流动,但是红色的div始终是浏览器宽度的100%,因此网格未集中在页面上。
这是我的CSS:
和HTML:
(4个答案)
Center align container and left align child elements
(9个答案)
How to center a flex container but left-align flex items
(3个答案)
2年前关闭。
我敢肯定有一个简单的答案,但我只是想不通。我正在尝试提出以下布局:
红色框是一个div,它应动态增长以适合内容,并应位于页面的中心。它的宽度应等于水平可容纳的黄色div的数目。黄色框是div,应对齐。到目前为止,我已经尝试将红色div在设置为text-align:center的容器div中显示为内联块,将黄色div设置为显示内联块。黄色的div正确显示并随着浏览器调整大小而流动,但是红色的div始终是浏览器宽度的100%,因此网格未集中在页面上。
这是我的CSS:
<style>
.bar {
height:50px;
font-weight:300;
text-align:right;
}
.bluebackground {
background-color:#00A9A3;
}
.barcontent {
margin-right:10px;
color:white;
}
.verticalalign {
display:inline-block;
vertical-align:middle;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
.normalfont {
font-family: 'Open Sans Light', sans-serif;
}
.bigtext {
font-size:20px;
}
.medium {
font-size:15px;
}
.blockp {
display:inline-block;
}
.darktext {
color:#333;
}
body {
height:100%;
margin:0;
padding:0;
background-color:#F6F6F6;
}
html, body, #body2 {
height: 100%;
min-height: 100%;
}
table td:last-child {
width: 100%;
}
.menulinkcontainer {
display:inline-block;
vertical-align:top;
padding:20px;
margin-bottom:20px;
background-color:green;
}
.menulinkbackdrop {
display:inline-block;
min-width:250px;
width:250px;
height:200px;
min-height:200px;
cursor:pointer;
}
.menulinkshader {
position:relative;
top:-200px;
left:0px;
width:100%;
min-width:100%
height:100%;
min-height:100%;
background-color:rgba(0,0,0,0.0);
}
.menulinktext {
display:inline-block;
min-width:250px;
max-width:250px;
width:250px;
}
.menucontainer {
padding:20px;
background-color:red;
display:inline-block;
clear:both;
float:left;
}
</style>
和HTML:
<div class='menucontainer'>
<div class='menulinkcontainer'>
<div class='menulinkbackdrop' style='background-color:#777' align='center'>
<img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
<div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
</div><br>
<div class='menulinktext normalfont bigtext' style='color:#777' align='center'>
REVIEWS
</div><br>
<div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
Reviews link.
</div>
</div>
<div class='menulinkcontainer'>
<div class='menulinkbackdrop' style='background-color:#f33' align='center'>
<img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
<div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
</div><br>
<div class='menulinktext normalfont bigtext' style='color:#f33' align='center'>
COMING SOON
</div><br>
<div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
Coming soon link.
</div>
</div>
<div class='menulinkcontainer'>
<div class='menulinkbackdrop' style='background-color:#3f3' align='center'>
<img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
<div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
</div><br>
<div class='menulinktext normalfont bigtext' style='color:#3f3' align='center'>
DEALS
</div><br>
<div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
Deals link.
</div>
</div>
<div class='menulinkcontainer'>
<div class='menulinkbackdrop' style='background-color:#3f3' align='center'>
<img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
<div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
</div><br>
<div class='menulinktext normalfont bigtext' style='color:#3f3' align='center'>
AWARDS
</div><br>
<div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
Awards link.
</div>
</div>
</div>
最佳答案
在调整视口大小时,您需要flexbox来灵活地对齐和包装元素,我希望这可以使您对它的实现有所了解。
.things {
padding: 0;
margin: 0;
flex-flow:row wrap; /*Wraps down in row fashion*/
display: flex; /* Display property on parent container*/
background:red;
}
.thing {
background:yellow;
border:1px solid black;
padding: 10px;
margin:5px;
flex:1 0 200px; /* 1 is for flex-grow, 0 for flex-shrink and the basis width is set to 200px */
max-width:250px;
height:200px;
align-items:center;
}
<div class="things">
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
</div>