如何将模型内容居中
[英]how to center model content
问题描述
我下面是html的模式对话框。 显示的图片应居中，但我似乎无法居中。
有人有解决办法吗？
<!-- modal popup dialog-->
<div class="modal fade centered" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog centered">
<div class="modal-content siteImageButton">
<div class="modal-body text-center">
<img id="image-gallery-image" class="img-responsive" src="" />
</div>
</div>
</div>
</div>
澄清：我希望将img放在模式div的中心。 我在模式div中没有文字。
3 个解决方案
解决方案1
1 2015-07-31 13:54:10
<!-- modal popup dialog-->
<div style="text-align: center;" class="modal fade centered" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog centered">
<div class="modal-content siteImageButton">
<div class="modal-body text-center">
<img id="image-gallery-image" class="img-responsive" src="" />
</div>
</div>
</div>
</div>
编辑：
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img id="image-gallery-image" class="img-responsive" src="" />
</div>
</body>
Edit2： “ Bootstrap的跨度向左浮动。将它们居中的所有方法都将覆盖此行为。”
像这样：
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
然后：
<div class="span7 center"> box </div>
解决方案2
1 已采纳 2015-07-31 14:08:39
.img-sensitive具有以下样式：
display: block;
max-width: 100%;
height: auto;
display:block表示从text-center继承的text-align:centre无效。
如果删除.img-responsive类，则图像将居中。
<div class="modal fade centered" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog centered">
<div class="modal-content siteImageButton">
<div class="modal-body text-center">
<img id="image-gallery-image" src="" />
</div>
</div>
</div>
</div>
解决方案3
0 2015-07-31 13:54:08
.text-center{
text-align: center;
margin: 0 auto;
}
如何在页脚中居中放置内容
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.