Центрировать картинки внутри div - PullRequest
Новая
       11

Центрировать картинки внутри div

0 голосов
/ 10 октября 2018

Мне разрешено применять только встроенные 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>

Ответы [ 3 ]

0 голосов
/ 10 октября 2018 
<p style="text-align:center"><img src="https://i.imgur.com/ivoEjnQ.png" /></p>

Попробуйте этот код

0 голосов
/ 10 октября 2018

Удалите поплавки, используйте 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>
0 голосов
/ 10 октября 2018

Избавьтесь от поплавков.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>
...