CSS 如何将图像死点与引导程序对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10879955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align an image dead center with bootstrap
提问by Fixer
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
我尝试了各种技术，例如将 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>
What's the easiest method to get an image centered relative to the page?
使图像相对于页面居中的最简单方法是什么？
回答by user3098434
Twitter Bootstrap v3.0.3 has a class: center-block
Twitter Bootstrap v3.0.3 有一个类：center-block
Center content blocks
Set an element to display: block and center via margin. Available as a mixin and class.
中心内容块
设置要显示的元素：通过边距阻止和居中。可作为 mixin 和 class 使用。
Just need to add a class .center-blockin the imgtag, looks like this
只需要.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>
In Bootstrap already has css style call .center-block
在 Bootstrap 中已经有 css 样式调用 .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
You can see a sample from here
您可以从此处查看示例
回答by fabiangebert
The correct way of doing this is
这样做的正确方法是
<div class="row text-center">
<img ...>
</div>
回答by Zim
Update 2018
2018 年更新
The center-blockclass no longer exists in Bootstrap 4. To center an image in Bootstrap 4, use mx-auto d-block...
该center-block级不再存在引导4。要在 Bootstrap 4 中居中图像，请使用mx-auto d-block...
<img src="..." class="mx-auto d-block"/>
回答by adswebwork
Add 'center-block' to image as class - no additional css needed
将“中心块”作为类添加到图像 - 不需要额外的 css
<img src="images/default.jpg" class="center-block img-responsive"/>
回答by David Silva Smith
Twitter bootstrap has a class that centers: .pagination-centered
Twitter bootstrap 有一个以 .pagination-centric 为中心的类
It worked for me to do:
它对我有用：
<div class="row-fluid">
<div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
The css for the class is:
该类的 css 是：
.pagination-centered {
text-align: center;
}
回答by Dulith De Costa
You could use the following. It supports Bootstrap 3.x above.
您可以使用以下内容。它支持上面的 Bootstrap 3.x。
<img src="..." alt="..." class="img-responsive center-block" />
回答by My Head Hurts
Assuming there is nothing else alongside the image, the best way is to use text-align: centerin the imgparent:
假设图像旁边没有其他东西，最好的方法是text-align: center在img父级中使用：
.row .span4 {
text-align: center;
}
Edit
编辑
As mentioned in the other answers, you can add the bootstrap CSS class .text-centerto the parent element. This does exactly the same thing and is available in both v2.3.3and v3
正如其他答案中提到的，您可以将引导 CSS 类添加.text-center到父元素。这完全相同，并且在v2.3.3和v3中都可用
回答by Leroy Gumede
Works for me. try using center-block
为我工作。尝试使用center-block
<div class="container row text-center">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
回答by Shiv
I need the same and here I found the solution:
我需要相同的，在这里我找到了解决方案：
https://stackoverflow.com/a/15084576/1140407
https://stackoverflow.com/a/15084576/1140407
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
and to CSS:
和 CSS：
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
回答by Venkatesh Rajavetrivel
You can use margin property with the bootstrap img class.
您可以在 bootstrap img 类中使用 margin 属性。
.name-of-class .img-responsive { margin: 0 auto; }
