html - 通过引导程序获取中间的卡盒
问题描述
可以看到,两个卡盒不在中间。我试过了,请看下面的代码。我希望你能帮帮我!先感谢您!
<div class="test" style="margin-left: auto; margin-right:auto; text-align: center; position: relative;">
<div class="container-fluid padding" style="margin-left: auto; margin-right:auto;">
<div class="row padding">
<div class="cold-md-4" style="margin-right: 1%; margin-left: 1%; margin-top: 1%; margin-bottom: 1%;">
<div class="card" style="width: 18rem; margin-left: 1%; ">
<img class="card-img-top" src="img\festival-tickets\ticket3.png">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-secondary">Go somewhere</a>
</div>
</div>
</div>
<div class="cold-md-4" style="margin-right: 1%; margin-left: 1%; margin-top: 1%; margin-bottom: 1%;">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="img\festival-tickets\ticket3.png">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-secondary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
只需将 a 添加justify-content: center;
到要居中的元素(在本例中为卡片)的父元素(that .row .padding
)。
.center {
justify-content: center;
}
<div class="test" style="margin-left: auto; margin-right:auto; text-align: center; position: relative;">
<div class="container-fluid padding" style="margin-left: auto; margin-right:auto;">
<div class="row padding center">
<div class="cold-md-4" style="margin-right: 1%; margin-left: 1%; margin-top: 1%; margin-bottom: 1%;">
<div class="card" style="width: 18rem; margin-left: 1%; ">
<img class="card-img-top" src="img\festival-tickets\ticket3.png">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-secondary">Go somewhere</a>
</div>
</div>
</div>
<div class="cold-md-4" style="margin-right: 1%; margin-left: 1%; margin-top: 1%; margin-bottom: 1%;">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="img\festival-tickets\ticket3.png">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-secondary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
推荐阅读
- javascript - Slick Slider (+ ACF) 所有图像高度相同
- angular - Angular Universal Express 预渲染使用错误的路径 src/src 而不仅仅是 src/
- java - 如何在自定义注释中选择性地使用注释
- security - Twitter 上的身份验证和会话如何工作?
- python - 不明白 RuntimeError 的原因:在当前进程完成之前尝试启动一个新进程
- azure - Azure NSG 阻止到 docker 容器的流量
- javascript - 我应该在反应打字稿中将什么类型传递给我的 imageIcon 道具?
- java - JBOSS 7 上 servlet 和 JSP 之间的通信
- c# - 输入按钮的值应在单击事件后使用 jquery 更改
- cmake - CMake无法从导入项目的依赖项中找到标头