如何将图像死点与引导程序对齐 [英] How to align an image dead center with bootstrap

问题描述

我正在使用引导程序框架并试图使图像水平居中但没有成功..

我尝试了各种技术，例如将 12 个网格系统分成 3 个相等的块，例如

<div class="row"><div class="span4"></div><div class="span4"><img src="logo.png"/></div><div class="span4"></div>

使图像相对于页面居中的最简单方法是什么?

解决方案

Twitter Bootstrap v3.0.3 有一个类:center-block

<块引用>

中心内容块

设置要显示的元素:通过边距块和居中.可作为 mixin 和 class 使用.

只需要在img标签中添加一个.center-block类，看起来像这样

<div class="row"><div class="span4"></div><div class="span4"><img class="center-block"src="logo.png";/></div><div class="span4"></div>

在 Bootstrap 中已经有 css 样式调用 .center-block

.center-block {显示:块；左边距:自动；右边距:自动；}

您可以在此处

查看示例

I'm using the bootstrap framework and trying to get an image centered horizontally without success..

I've tried various techniques such as splitting the the 12 grid system in 3 equal blocks e.g

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

What's the easiest method to get an image centered relative to the page?

解决方案

Twitter Bootstrap v3.0.3 has a class: center-block

Center content blocks

Set an element to display: block and center via margin. Available as a mixin and class.

Just need to add a class .center-block in the img tag, looks like this

<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>

In Bootstrap already has css style call .center-block

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

You can see a sample from here

这篇关于如何将图像死点与引导程序对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！