Question

如何将img对齐到下方的文本？包装器div左对齐。

<div class="wrapper"> 
 <div class="com-icon">
   <img src="images/IT.png" alt="laptop logo">
 </div>
 <div class="com-text">
    <p>IT Solutions</p>
 </div>
</div>

Answer 1

在com-icon和com-text周围添加另一个包装器。然后对齐你想要它。示例如下：

<div class="wrapper"> 
    <div class="wrapper-inner">
        <div class="com-icon">
            <img src="images/IT.png" alt="laptop logo">
        </div>
        <div class="com-text">
            <p>IT Solutions</p>
        </div>
    </div>
</div>

Answer 2

将此添加到您的css文件中：

.wrapper{
  text-align: center;
}

或者如果您只想检查它是否正常工作，您可以添加臭名昭着的内联样式。这不是推荐的方法，只是为了看它是否正常！

<div class="wrapper" style="text-align:center;"> 
 <div class="com-icon">
   <img src="images/IT.png" alt="laptop logo">
 </div>
 <div class="com-text">
    <p>IT Solutions</p>
 </div>
</div>

Answer 3

制作一张桌子

＆＃13;

table.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.com-text,
.com-icon {
  margin: auto;
}

＆＃13;

<div class="wrraper">
  <table class="center">
    <tr>
      <td>
        <div class="com-icon">
          <img src="image.jpg" alt="laptop logo">
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="com-text">
          <p>IT Solutions</p>
        </div>
      </td>
    </tr>
  </table>
</div>

＆＃13;

如何将div放在与其下方div相对应的中心？

3 个答案: