如何將模型內容居中
[英]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.