移动端自适应正方形里面有排两排的文字怎么保证样式不会变

Question

如果文字只有一排样式是不会变的 如果加一排就会变形

.game-model{

        display: inline-block;
width: 30%;
background:white;
font-size: 16px;
font-weight: bold;
position: relative;
vertical-align: middle;
margin-left: 2%;
    }
    .game-model:before {
content: "";
display: inline-block;
padding-bottom: 100%;
width: .1px;
vertical-align: middle;

}
<div class="game-model-group">

<div class="game-model">
    个人场   
</div>
<div class="game-model">
    5V5组队
</div>
<div class="game-model">
    5V5组队
</div>

</div>
自适应正方形的代码 请问这个问题怎么解决

Answer 1

1.容器高度，宽度固定,第一行，和第二行文字分别用p标签包括
2.display:flex;//弹性布局

3.flex-direction:column;
justify-content:space-around;

Answer 2

定位在中间不就行了

Answer 3

首先说一下变形的原因，那是因为你没有设置容器的高度，所以当容器内容增多时，容器就被撑开了。

可以使用flex布局来实现你想要的效果：

.game-model{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50px; //设置你想要的宽高
    height: 50px;
}