[英]How can I center two images side-by-side with Bootstrap 3?
I can't seem to get the two images of class 'social' side-by-side, central to the column of class 'col-sm-4'. 我似乎无法并排获得“社会”类的两个图像,它们在“ col-sm-4”类的列的中心。 Instead they stack as the screen size decreases.
相反,它们会随着屏幕尺寸的减小而堆叠。 Any ideas how I can do this responsively?
有任何想法我该如何快速地做到这一点?
HTML 的HTML
<div class="container-fluid">
<div class="row" style="border-top: 0">
<!-- Profile info -->
<div class="col-sm-4 col-sm-offset-4">
<img class="img-circle img-responsive" src="images/callum.jpg">
<h1 class="text-center" style="color: #3FA2B2">Callum Messiter</h1>
<p class="text-center">100-trillion cells and 100-billion neurons defying the 1 in 10<sup>2,685,000</sup> chance of me existing.</p>
<img class="social" src="images/twitter.png">
<img class="social" src="images/github.png">
</div>
</div>
</div>
CSS 的CSS
.row{
border-top: 1px solid #808080;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.col-sm-4{
height: 450px;
}
.img-circle{
height: 200px;
width: 200px;
margin: 0 auto;
position: relative;
top: 40px;
border: 2px solid white;
}
.text-center{
font-family: helvetica;
color: white;
position: relative;
top: 50px;
}
span{
font-weight: bold;
background-color: #e6e6e6;
color: #3FA2B2;
padding: 3px 7px 3px 7px;
}
.social{
height: 50px;
width: 50px;
margin: 0 auto;
}
Add class text-center
before img. 在img之前添加class
text-center
。 like this 像这样
<div class="text-center">
<img class="social" src="https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg">
<img class="social" src="https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg">
</div>
DEMO HERE https://jsfiddle.net/ff9g43t8/ 在这里演示https://jsfiddle.net/ff9g43t8/
Try: 尝试:
.social {
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.