CSS 在引导列中的图像下居中标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39042860/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center a caption under an image in bootstrap column
提问by Erich Sterzing
I'm using CSS to size and center images in bootstrap col-md-4's and everything is centering ok except the actual caption container. I used text-align which centered the text but can't figure out how to align the entire caption center. Do I need to figure out the pixels and margin-left it? Thanks for any help, I'm sure it's easy! http://http://codepen.io/chiggory/pen/xOZXQB
我正在使用 CSS 在 bootstrap col-md-4's 中调整图像的大小和居中，除了实际的标题容器之外，一切都在居中。我使用 text-align 将文本居中，但无法弄清楚如何对齐整个标题中心。我需要弄清楚像素和边距吗？感谢您的帮助，我相信这很容易！http://http://codepen.io/chiggory/pen/xOZXQB
<div class="container">
<div class="row">
<div class="col-md-4 border"><a href="#"><img class="img-responsive size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg"></a>
<div class="caption">Test</div>
</div>
</div>
.size {
height: 230px;
width: 230px;
display: block;
margin-left: auto;
margin-right: auto;
border:5px solid #800000;
}
.caption {
font-size: 20px;
color: white;
text-align: center;
background-color: #800000;
width: 230px;
}
回答by Zim
Use the Bootstrap center-blockclass..
使用 Bootstrapcenter-block类..
<div class="caption center-block">Test</div>
回答by swngr
Some times what you would need is Bootstrap text-centerclass:
有时你需要的是 Bootstraptext-center类：
<div class="caption text-center">Text here</div>
回答by antelove
Center a caption under an image in bootstrap column
在引导列中的图像下居中标题
修改.size{height:auto;width:100%;display:block;margin-left:auto;margin-right:auto;border:5px solid maroon;box-sizing:border-box}.caption{font-size:20px;color:#fff;background-color:maroon;width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center}.display-container{position:relative;height:230px;width:230px;//float:left;//display:block}<div class="container"><div class="row"><div class="col-md-4 border display-container"> <a href="#"> <img class="img-responsive size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" /> </a><div class="caption center-block">Test</div></div></div></div>回答by Kevin Jantzer
Just add margin-left: auto; margin-right: auto;to the caption like you have on the image.
只需margin-left: auto; margin-right: auto;像在图像上一样添加到标题中即可。
.size {
height: 230px;
width: 230px;
display: block;
margin-left: auto;
margin-right: auto;
border:5px solid #800000;
}
.caption {
font-size: 20px;
color: white;
text-align: center;
background-color: #800000;
width: 230px;
margin-left: auto;
margin-right: auto;
} <div class="container">
<div class="row">
<div class="col-md-4 border"><a href="#"><img class="img-responsive size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg"></a>
<div class="caption">Test</div>
</div>
</div>To make them both the same size you need to either add the same border that's on the image to the caption, or add box-sizing: border-boxto the image.
要使它们的大小相同，您需要将图像上的相同边框添加box-sizing: border-box到标题中，或者添加到图像中。
