图片居中 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

摆脱浮动。 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 2

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

试试这个代码

Answer 3

删除浮动，使用 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>

图片居中 div

Center pictures inside div

html

css

stylesheet