Позиционирование внутри <td> 2 элементов

154

22 апреля 2017, 22:10

Здравствуйте.
Внутри есть картинка и текст под ней.
Можно ли сделать так чтобы картинка была по центру а текст по левому краю?

<td><img><br><span>text</span></td>

Answer 1

Задайте картинке display: block; margin: 0 auto; :

table { 
  width: 100%; 
} 
 
td { 
  border: 1px solid #ccc; 
} 
 
td img { 
  display: block; 
  margin: 0 auto; 
}

<table> 
  <tr> 
    <td> 
      <img src="https://dummyimage.com/100x100/000/fff" alt=""> 
      <br> 
      <span>text</span> 
    </td> 
     
    <td> 
      <img src="https://dummyimage.com/100x100/000/fff" alt=""> 
      <br> 
      <span>text</span> 
    </td> 
  </tr> 
</table>

p.s: ячейке можно задать text-align: left;, чтобы наверняка выровнять текст по левому краю ( на случай если выше задано выравнивание по центру, например для всей таблицы).