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

问题描述

我正在使用引导框架，并试图获取一个水平居中的图像，但没有成功。

我已经尝试了各种技术，如分割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

中心内容块

设置要显示的元素：通过边距阻止和居中。

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

 < div class =container> 
< div class =row> 
< div class =span4>< / div> 
< div class =span4>< img class =center-blocksrc =logo.png/>< / div> 
< div class =span4>< / div> 
< / div> 
  
 
 
 
 
 
 
 
在Bootstrap中已经有CSS样式调用.center-block 
  .center-block {
 display：block; 
 margin-left：auto; 
 margin-right：auto; 
} 
  
您可以从此处 
 
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>


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