gpt4 book ai didi

html - 图片下方带有文本的 Flexbox/Bootstrap 元素

转载 作者:太空宇宙 更新时间:2023-11-04 08:05:42 25 4
gpt4 key购买 nike

我正在尝试使用 flexbox 和 bootstrap 实现下图。虽然 flex box 可以用作响应式代码,但我仍然选择使用 bootstrap。 class="col-xs-3"

enter image description here

但这就是我到目前为止所得到的Fiddle

.services-section {
background: #414142;
padding: 20px 50px;
}

.services-section .flex-services {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 300px;
}

.services-section .flex-services div {
text-align: center;
background: #676768;
padding: 5px;
flex: 1 1;
margin: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="services-section">
<div class="container">
<div class="col-xs-3 flex-services">
<div>
<img class="img img-responsive" src="http://via.placeholder.com/120x120" alt="Services Icon">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="col-xs-3 flex-services">
<div>
<img class="img img-responsive" src="http://via.placeholder.com/150x150" alt="Services Icon">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="col-xs-3 flex-services">
<div>
<img class="img img-responsive" src="http://via.placeholder.com/200x200" alt="Services Icon">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="col-xs-3 flex-services">
<div>
<img class="img img-responsive" src="http://via.placeholder.com/180x180" alt="Services Icon">
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>

请注意图片下方的文字垂直对齐..

最佳答案

尝试将 display: flex 属性添加到 .container 并将 align-self: baseline 添加到 .flex-services 类。

这是一个 fiddle :https://jsfiddle.net/ncsgc3gn/5/

希望对您有所帮助!

关于html - 图片下方带有文本的 Flexbox/Bootstrap 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46658262/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com