我使用Bootstrap 3做一个目录。当在平板电脑上显示时,产品图像看起来很难看,因为它们的尺寸很小(500x500),在浏览器中宽度为767像素。我想把图像放在屏幕的中央,但由于某种原因我不能。谁将帮助解决这个问题?
当前回答
如果你使用Bootstrap 3,只需使用.text-center类。
<div class="text-center">
<img src="..." alt="..."/>
</div>
注意:这对img-responsive不起作用
其他回答
这应该使图像居中,并使其响应。
<img src="..." class="img-responsive" style="margin:0 auto;"/>
如果你使用Bootstrap 3,只需使用.text-center类。
<div class="text-center">
<img src="..." alt="..."/>
</div>
注意:这对img-responsive不起作用
要添加到已经给出的答案,将img-responsive与img-thumbnail结合使用将把display: block设置为display: inline block。
到目前为止,接受的最佳解决方案似乎是<img class="center-block"…/ >。但是没有人提到过中央块是如何工作的。
以Bootstrap v3.3.6为例:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
<img>的display默认值为inline。Value block将一个元素显示为块元素(如<p>)。它从一个新的行开始,并占用整个宽度。通过这种方式,两个边距设置让图像水平地保持在中间。
试试这个:
.img-responsive { 显示:块; 高度:汽车; max-width: 100%; 保证金:0汽车; } .Image { 背景:# ccc; 填充:30 px; } < div class = "图像" > <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique"> < / div >
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?