水平排列四个块，块中的文字垂直居中

西红柿挂面

于 2020-03-13 16:37:34 发布

阅读量261

点赞数

本文链接：https://blog.csdn.net/Bcxbclj/article/details/104837651

版权

页面效果
在这里插入图片描述
1.利用float和margin

.box {
            width: 100%;
        }
        .one,
        .two,
        .three,
        .forth {
            width: 20%;
            height: 100px;
            float: left;
            margin: 10px 2%;
            text-align: center;
            line-height: 100px;
        }

2.flex盒子

  .box {
            width: 100%;
            display: flex;
            justify-content: space-around;
            text-align: center;
            line-height: 100px;
        }     
        .one,
        .two,
        .three,
        .forth {
            width: 20%;
            height: 100px;
        }

3.利用table，table-cell属性

 .box {
            width: 100%;
            text-align: center;
            line-height: 100px;
            display: table;
        }      
        .one,
        .two,
        .three,
        .forth {
            height: 100px;
            display: table-cell;
        }

4.利用 bootstrap栅格布局

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>