如何将图像居中
如何将图像居中
提问于 2015-08-28 13:11:08
目前，我在我的项目中保存了一张地图的图像，我想将其包括在我的解决方案中，我的第一个网站。我是一个非常新的ASP.NET和CSS，但有一些超文本标记语言的经验。我很难弄清楚如何适当地居中和拉伸图像，以便无论浏览器窗口的大小如何，地图的中心始终保持相应的居中。
敬请指教！
<section>
<div class="container-fluid">
<div class="row">
<img src="/img/additional/map.png"/>
</div>
</div>
</section>
编辑1：
我在http://getbootstrap.com/css/#images上找到了以下信息
响应式图像
Bootstrap 3中的图像可以通过添加.img-responsive类使其响应友好。这将对图像应用max-width: 100%;，height: auto；和display: block；，以便它可以很好地缩放到父元素。
要使使用.img响应类的图像居中，请使用.center-block而不是.text-center。有关.center-block用法的更多详细信息，请参阅帮助器类部分。
SVG图像和IE 8-10
在Internet Explorer 8-10中，具有.img响应性的SVG图像的大小不成比例。要解决此问题，请在需要的地方添加width: 100%9；。Bootstrap不会自动应用它，因为它会使其他图像格式变得复杂。
<img src="..." class="img-responsive" alt="Responsive image">回答 5
Stack Overflow用户
发布于 2015-08-28 13:27:30
只需在图像中添加居中标记即可。
<section>
<div class="container-fluid">
<div class="row">
<center>
<img src="/img/additional/map.png"/>
</center>
</div>
</div>
</section>Stack Overflow用户
发布于 2015-08-28 22:19:05
根据http://getbootstrap.com/css/#images添加了class="img-responsive center-block"。
<section>
<div class="row">
<img class="img-responsive center-block" src="/img/additional/map.png"/>
</div>
</section>Stack Overflow用户
发布于 2019-12-24 22:41:42
您也可以使用纯CSS，例如：
。
center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32263702
复制相关文章
相似问题
腾讯云开发者
