我正在使用引导框架并试图使图像水平居中但没有成功..
我尝试了各种技术,例如将 12 个网格系统分成 3 个相等的块,例如
<div class="container"> <div class="row"> <div class="span4"></div> <div class="span4"><img src="logo.png" /></div> <div class="span4"></div> </div> </div>
使图像相对于页面居中的最简单方法是什么?
Twitter Bootstrap v3.0.3 有一个类:center-block
中心内容块 设置要显示的元素:通过边距阻止和居中。可作为 mixin 和 class 使用。
中心内容块
设置要显示的元素:通过边距阻止和居中。可作为 mixin 和 class 使用。
只需要.center-block在img标签中添加一个类,看起来像这样
.center-block
img
<div class="container"> <div class="row"> <div class="span4"></div> <div class="span4"><img class="center-block" src="logo.png" /></div> <div class="span4"></div> </div> </div>
在 Bootstrap 中已经有 css 样式调用 .center-block
.center-block { display: block; margin-left: auto; margin-right: auto; }
你可以从这里看到一个样本