css - 如何使div居中
本文介绍了css - 如何使div居中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我用boostrap框架写了一段div样式。但是无论如何都无法居中。代码大致如下:
<div class="row" style="margin-bottom: 5%;" align="center">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding-top: 2%;" align="center">Test</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">
</div>
</div>
出来的样子是这样的
上面那个Test是居中的。要怎样才能使下面的小div居中排列呢?
解决方案
你用boostrap 还在里面写行内样式?
<div class="row" style="margin-bottom: 5%;" align="center">
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding-top: 2%;" align="center">Test</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2" style="height:200px;margin:12px;box-shadow:0 3px 25px black;" align="center">
</div>
</div>
</div>
这篇关于css - 如何使div居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文