在css中很多时候会遇到浏览器绝对垂直水平居中的问题,以下记录在项目中用到的例子。
1.绝对居中。
display:flex;
justify-content:center;
align-items:center;
2.固定的宽度排列div。
原理:将最外层的div宽度按照子层的div宽度均分,整齐排列,如果超出了就往下一行排列
<div style="display:flex;flex-direction:row;flex-wrap:wrap;width:1000px;">
<div style="margin-bottom: 20px;width:285px;">
</div>
<div style="margin-bottom: 20px;width:285px;">
</div>
<div style="margin-bottom: 20px;width:285px;">
</div>
<div style="margin-bottom: 20px;width:285px;">
</div>
<div style="margin-bottom: 20px;width:285px;">
</div>
<div style="margin-bottom: 20px;width:285px;">
</div>
</div>
效果如图:
3.在一定的宽度内分布的排列div。
.question-row1{
display:flex;
flex-direction: column;
align-items:center;
}
.question-options{
padding-bottom: 14px;
flex-wrap: wrap;
display: flex;
line-height: 30px;
justify-content: space-between;
}
<div class="question-row1">
<div class="question-row" style="width: 1000px;display:flex;flex-direction: column;">
<div class="question-options">
<span style="padding-right: 40px">
<input type="hidden" name="option" id="${option.optionId}" value="${option.score}">
<span>${option.content}</span>
</span>
</div>
</div>
</div>
效果图:
图二
以上只是用到的属性,以后遇到再更新