Как совместить изображение и текст по центру? - PullRequest
Новая
       89

Как совместить изображение и текст по центру?

0 голосов
/ 21 июня 2020

Когда я использую align-text: centre, текст центрируется, но изображение находится слева, и float: none; не помогает. Что мне не хватает? 

<table class="universe1" align="center">
  <tbody>
    <tr>
      <td>
        <div class="descriptext2" style="text-align: center; padding-top: 5px;">Text here<br><br>
        </div>
        <strong><img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">     Right text</strong> <br>     <a href="mailto:email" target="_blank" rel="noopener noreferrer"><span style="color: #e12121;">right text</span><br><br><br></a>
        <strong> <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png"> Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" href="http://link.here" target="_blank" rel="noopener noreferrer">Right text<br><br><br></a></span>        <strong> <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">     Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" href="https://contact.us" target="_blank" rel="noopener noreferrer">Right text<br><br><br></a></span>
        <strong> <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">     Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" _blank="" rel="noopener noreferrer">Right text<br>      Right text<br><br><br><br></a></span>
      </td>
    </tr>
  </tbody>
</table>

Ответы [ 2 ]

0 голосов
/ 21 июня 2020
• 1000 * через ), используйте контейнер и установите flex-direction в столбец, чтобы каждая последующая пара изображение / текст появлялась в следующей строке. Затем разместите оба элемента в середине по широте , используя свойство align-items, а также свойство text-align так, чтобы текст располагался по центру по горизонтали в самом блочном элементе (в отличие от начала справа ): 

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Vertical alignment */
  justify-content: center;
  text-align: center;
}
<div class="descriptext2" style="text-align: center; padding-top: 5px;">Text here</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e12121;"><a href="mailto:email" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e82424;"><a style="color: #e82424;" href="http://link.here" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>

Чтобы центрировать содержимое по вертикали (так, чтобы и изображение, и текст рядом с было центрировано по длине ), используйте контейнер и поместите оба элемента в посередине по широте с использованием свойства align-items и по длине с использованием свойства justify-content. Обратите внимание, что вы можете установить для свойства flex-direction: (которое появилось в первом примере) значение row, чтобы каждое последующее изображение / текст появлялось в одной строке, то есть «спина к спине». Однако как в приведенном выше, так и в нижнем примере используйте столбцы: 

.container {
  display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center;
  /* Vertical alignment */
}
<div class="descriptext2" style="text-align: center; padding-top: 5px;">Text here</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e12121;"><a href="mailto:email" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png" vertical-align: "middle">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e82424;"><a style="color: #e82424;" href="http://link.here" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>
0 голосов
/ 21 июня 2020

Я сделал фрагмент кода. Пожалуйста, посмотрите. Я удалил свойство float: left в теге <img>. Я добавил display: block; и margin: 0 auto; CSS для тега <img>. Не уверен, правильно ли я вас понял. 

img {
  display: block;
  margin: 0 auto;
}
<table class="universe1" align="center">
  <tbody>
    <tr>
      <td>
        <div class="descriptext2" style="text-align: center; padding-top: 5px;">Text here<br><br>
        </div>
        <strong><img style="width: 48px; height: 48px;" src="https://file-qA333tsLkr.png">     Right text</strong> <br>     <a href="mailto:email" target="_blank" rel="noopener noreferrer"><span style="color: #e12121;">right text</span><br><br><br></a>
        <strong> <img style="width: 48px; height: 48px;" src="https://file-qA333tsLkr.png"> Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" href="http://link.here" target="_blank" rel="noopener noreferrer">Right text<br><br><br></a></span>        <strong> <img style="width: 48px; height: 48px;" src="https://file-qA333tsLkr.png">     Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" href="https://contact.us" target="_blank" rel="noopener noreferrer">Right text<br><br><br></a></span>
        <strong> <img style="width: 48px; height: 48px;" src="https://file-qA333tsLkr.png">     Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" _blank="" rel="noopener noreferrer">Right text<br>      Right text<br><br><br><br></a></span>
      </td>
    </tr>
  </tbody>
</table>
...