div中的中心图片

Question

我被允许只应用内联css。我有一个html文件，我在其中显示一些徽标。我尝试了每个块中的'text-align center'以及'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

摆脱花车。封套上的text-align:center;。

<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; text-align:center;">
        <h3 style="margin-bottom: 0px;">Our VAT Clients</h3>
        <div style="width: 150px; display:inline-block; margin: auto;">
            <img src="https://i.imgur.com/xAeCka9.png" alt="Client" width="149px">
        </div>
        <div style="width: 150px; display:inline-block; margin: auto; ">
            <img src="https://i.imgur.com/iXSZMRM.png" alt="Client" width="149px">
        </div>
        <div style="width: 150px; display:inline-block; margin: auto;">
                <img src="https://i.imgur.com/ivoEjnQ.png" alt="Client" width="149px">
                </div>
        </div>
    </div>

Answer 3

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

试试这个代码