把图片放在flexbox上？
把图片放在flexbox上？
提问于 2018-04-06 03:28:17
我试着把这些圆形图像放在我的flexboxes上，就像这样：here
我无法让图像向上移动，我尝试添加边距-底部，但图像停留在flexboxes内部。这就是我现在的样子：here
如果有人能帮我，我会很高兴的。提前谢谢。
.contact-flex {
display: flex;
justify-content: center;
width: 100%;
}
.boxes, logos {
width: 22.92vw;
background: #e6e6e6;
border-radius: 1.18vw;
margin: 2.52vw;
text-align: center;
}
.logos {
margin-bottom: -50px;
}
.info {
text-align: center;
font-size: 1.26vw;
}<div class="contact-flex">
<div class="boxes">
<div class="logos">
<img src="Contacts/phone-01.png" width="80px">
</div>
<div class="info">
<br><p><b>Call Us</b><br><br>
Te: <b>519-725-7625</b></p>
</div>
</div>
<div class="boxes">
<div class="logos">
<img src="Contacts/clock-01.png" width="80px">
</div>
<div class="info">
<table style="width:100%">
<tr>
</tr>
<tr>
<th>Monday</th>
<td>10am - 6pm</td>
</tr>
<tr>
<th>Tuesday</th>
<td>10am - 6pm</td>
</tr>
<tr>
<th>Wednesday</th>
<td>10am - 6pm</td>
</tr>
<tr>
<th>Thursday</th>
<td>10am - 8pm</td>
</tr>
<tr>
<th>Friday</th>
<td>10am - 8pm</td>
</tr>
<tr>
<th>Saturday</th>
<td>10am - 6pm</td>
</tr>
<tr>
<th>Sunday</th>
<td>12pm - 5pm</td>
</tr>
</table>
</div>
</div>
<div class="boxes">
<div class="logos">
<img src="Contacts/location-01.png" width="80px">
</div>
<div class="info">
<p><br>The Shops<br>
At Waterloo Town Square<br>
75 King St. S,<br>
Waterloo, Ontario, Canada</p>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-04-06 03:40:08
这里有一个解决方案：
.contact-flex {
display: flex;
justify-content: center;
width: 100%;
height:300px;
box-sizing:border-box;
padding-top:20px;
}
.boxes, logos {
width: 22.92vw;
background: #e6e6e6;
border-radius: 1.18vw;
margin: 2.52vw;
text-align: center;
}
.logos {
margin-top: -30px;
}
.info {
text-align: center;
font-size: 1.26vw;
}<div class="contact-flex">
<div class="boxes">
<div class="logos">
<img src="http://via.placeholder.com/75x75" style="border-radius:50%;">
</div>
<div class="info">
<br><p><b>Call Us</b><br><br>
Te: <b>519-725-7625</b></p>
</div>
</div>
<div class="boxes">
<div class="logos">
<img src="http://via.placeholder.com/75x75" style="border-radius:50%;">
</div>
<div class="info">
<table style="width:100%">
<tr>
</tr>
<tr>
<th>Monday</th>
<td>10am - 6pm</td>
</tr>
<tr>
<th>Tuesday</th>
<td>10am - 6pm</td>
</tr>
<tr>
<th>Wednesday</th>
<td>10am - 6pm</td>
</tr>
<tr>
<th>Thursday</th>
<td>10am - 8pm</td>
</tr>
<tr>
<th>Friday</th>
<td>10am - 8pm</td>
</tr>
<tr>
<th>Saturday</th>
<td>10am - 6pm</td>
</tr>
<tr>
<th>Sunday</th>
<td>12pm - 5pm</td>
</tr>
</table>
</div>
</div>
<div class="boxes">
<div class="logos">
<img src="http://via.placeholder.com/75x75" style="border-radius:50%;">
</div>
<div class="info">
<p><br>The Shops<br>
At Waterloo Town Square<br>
75 King St. S,<br>
Waterloo, Ontario, Canada</p>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49680089
复制相关文章
相似问题
腾讯云开发者
