如何使用外部css文件对div元素进行居中 react 。我尝试使用其他人发布的 bootstrap 类和内联样式,但是这些都不起作用。我想知道你们如何在没有外部CSS文件的情况下实现这一目标。
最佳答案
偏移量:第一个使用Bootstrap自己的偏移量类,因此它不需要更改标记,也不需要额外的CSS。关键是将偏移量设置为等于行剩余大小的一半。因此,例如,大小为6的列将通过添加偏移量3(即(12-6)/2)居中。
在标记中,它看起来像:
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
margin-auto:您可以使用margin: 0 auto ;将任何列大小居中。技术,您只需要照顾Bootstrap网格系统添加的 float 功能即可。我建议定义一个自定义CSS类,如下所示:
.col-centered{
float: none;
margin: 0 auto;
}
现在,您可以将其添加到任何屏幕尺寸的任何列尺寸,并且可以与Bootstrap的响应式布局无缝协作:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>