时间戳

首页 > 解决方案 > Div 内的内联内容

javascript - Div 内的内联内容

问题描述

我正在转换一个 PSD 文件，现在我有两张卡片，我希望卡片中的内容是这样的。任何人都可以帮助我吗？

这是我当前的代码：

.container {
	 margin-top: 10px;
}

.card {
   display: flex; 
   justify-content: center;
   align-items: center
}
<div class="container">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-md-6">
                <div class="card height-2">
                    <i class="material-icons">gavel</i>
                    <h5>Legislacion</h5>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card height-2">
                    <i class="material-icons">today</i>
                    <h5>Calendar</h5>
                </div>
            </div>
        </div>
    </div>
</div>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

标签： javascripthtmlcssbootstrap-4

解决方案

由于您使用的是 Bootstrap >= 4，因此您可以d-flex justify-content-* align-items-*在row

.container {
	 margin-top: 10px;
}

.card {
   display: flex; 
   justify-content: center;
   align-items: center
}
<div class="container">
    <div class="col-lg-12">
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col">
                <div class="card height-2">
                    <i class="material-icons">gavel</i>
                    <h5>Legislacion</h5>
                </div>
            </div>
            <div class="col">
                <div class="card height-2">
                    <i class="material-icons">today</i>
                    <h5>Calendar</h5>
                </div>
            </div>
        </div>
    </div>
</div>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

推荐阅读