Question

我试图将这些圆形图像放在我的flexbox上，如下图所示： here

我无法让图像向上移动，我尝试添加margin-bottom并且图像仍然卡在Flexbox内部。这就是我目前的样子：here

如果有人能帮助我，我很乐意欣赏它。提前谢谢。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

在您的css .logos定义中，您需要更正：

.logos {
  margin-top: -50px;
}

保证金顶部为（您的图像高度尺寸）/ 2

的负值

Answer 2

这是一个解决方案：

.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>

Answer 3

将Margin-top添加到.logos类并填充到.boxes，logos类，以便文本不会靠近Box的下边缘。

.logos {
    margin-bottom: -20px;
    margin-top:-45px;
}

.boxes, logos {
    width: 22.92vw;
    background: #e6e6e6;
    border-radius: 1.18vw;
    margin: 2.52vw;
    text-align: center;
    padding-bottom:20px;
}

Answer 4

根据您想要的副作用，至少有3种方法可以做到这一点。

更改

.logos {
    margin-bottom: -50px;
}

到

A）正如其他人所指出的那样：

.logos {
    margin-top: -50px;
}

否定margin-top会将其拉出来，并将其下方的内容也提升。

B）

.logos {
    transform: translate(0, -50%);
}

这会拉起您的圈子，但保持原来的空间不受影响

C）

.logos {
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left:-20px;
}

.boxes, logos {
    ...
    padding-top: 40px;
}

与A相同的副作用，但代码更多。

将图像放在flexbox上？

4 个答案: