我使用Bootstrap 3做一个目录。当在平板电脑上显示时,产品图像看起来很难看,因为它们的尺寸很小(500x500),在浏览器中宽度为767像素。我想把图像放在屏幕的中央,但由于某种原因我不能。谁将帮助解决这个问题?
当前回答
这应该使图像居中,并使其响应。
<img src="..." class="img-responsive" style="margin:0 auto;"/>
其他回答
2021.09来自一个项目:
<div class="d-flex" style="height: 60px; width: 60px;">
<img alt="ddd" src="myurl" class="m-auto"/>
</div>
这应该使图像居中,并使其响应。
<img src="..." class="img-responsive" style="margin:0 auto;"/>
简单地把所有的图片缩略图放在row/col div中,就像这样:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>
一切都会好起来的!
我建议采用更“抽象”的分类。添加一个新类"img-center",它可以和.img-responsive类结合使用:
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>
.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?