Question

仅允许我应用内联CSS。我有一个html文件，其中显示了一些徽标。我尝试了每个块中的“文本对齐中心”以及“ margin：0 auto”样式。但是它仍然不能水平居中。

这是我的HTML代码示例：

<div style="width: 100%; float: left; background-color: #a30074;margin:auto">
     <h2 style="text-align: center; margin-bottom: 0px;">OUR CLIENTS</h2>
     <hr style="width: 10%; margin-bottom: 0px; border-color: #a0a0a0;">
     <hr style="width: 10%; margin-top: 1px; border-color: #a0a0a0;">
      <!--Container-->
    <div style="margin:auto">
        <h3 style="margin-bottom: 0px;">Our VAT Clients</h3>
        <div style="width: 150px; float: left; margin: auto; display: block;">
          <img src="https://i.imgur.com/xAeCka9.png" alt="Client" width="149px">
        </div>
        <div style="width: 150px; float: left; margin: auto; display: block;">
           <img src="https://i.imgur.com/iXSZMRM.png" alt="Client" width="149px">
        </div>
        <div style="width: 150px; float: left; margin: auto; display:block;">
           <img src="https://i.imgur.com/ivoEjnQ.png" alt="Client" width="149px">
        </div>
    </div>
</div>

Answer 1

移除浮标，对图像容器使用flexbox。

<div style="background-color: #a30074;">
  <h2 style="text-align: center; margin-bottom: 0px;">OUR CLIENTS</h2>
  <hr style="width: 10%; margin-bottom: 0px; border-color: #a0a0a0;">
  <hr style="width: 10%; margin-top: 1px; border-color: #a0a0a0;">
  <!--Container-->
  <h3 style="margin-bottom: 0px; text-align: center;">Our VAT Clients</h3>
  <div style="margin: 0 auto; display:flex; justify-content: center;">
    <div style="width: 150px;">
      <img src="https://i.imgur.com/xAeCka9.png" alt="Client" width="149px">
    </div>
    <div style="width: 150px;">
      <img src="https://i.imgur.com/iXSZMRM.png" alt="Client" width="149px">
    </div>
    <div>
      <img src="https://i.imgur.com/ivoEjnQ.png" alt="Client" width="149px">
    </div>
  </div>
</div>

Answer 2

摆脱浮标。 0在包装器上。

text-align:center;

Answer 3

<p style="text-align:center"><img src="https://i.imgur.com/ivoEjnQ.png" /></p>

尝试此代码

div内的中心图片

3 个答案: