Выровняйте изображение по центру <td></td>

Question

У меня есть следующий код:

<td>
<img src="some_image_url.png" class="png" />
<img src="another_image_url.jpg" />
</td>

.css для class = "png" :

.png {
    position:absolute;
}

Как мне сделатьРаспродано изображение, которое будет показано в середине, как другое изображение выровнено?

Спасибо.

РЕДАКТИРОВАТЬ: Вот .css для td :

.something td {
    padding: 7px;
    width: 20%;
    text-align: center;
    vertical-align: top;
}

Answer 1

Установить выравнивание текста таблицы по центру

Answer 2

извините, что не ответил раньше, у меня есть решение: (У меня нет времени, позже я улучшу свой ответ)

Абсолютные изображения не находятся в том же потоке, что и встроенные изображения по умолчанию, но вы все равно можете использовать 'text-align: center'

Просто сделайте обратное, вместо того, чтобы выставлять абсолютное значение для отображения class = "png", присвойте ему положение: относительный ... А теперь задайте абсолютную позицию для img снизу:

<style type="text/css">    
.png {position:relative; z-index:10}
.bottom {position:absolute; z-index:0; left:0; top:0 }
</style>

<table>
<tr>
   <td style=" text-align:center">
     <img src="some_image_url.png" class="png" />
     <img src="another_image_url.jpg" class="bottom" />
   </td>
</tr>
</table>

Таким образом, у вас будет автоматическое центрированное изображение поверх другого. Не забывайте, что если вы используете position: absolute; Вы ДОЛЖНЫ установить верх или низ; или влево или вправо. В браузерах, таких как IE, если вы не укажете хотя бы верхнюю часть с левой стороны, он будет отображаться способом IE (не работает).

(в моем браузере он работает, я не знаю, почему скрипка не показывает его так, как я хочу, пожалуйста, проверьте его и скажите, все ли в порядке)

Кстати, добавление div, как вы сделали, является лучшим решением IMO.

Answer 3

попробуйте так:

td
{
  position: relative; /* if it's IE */
  /* position: fixed;  if it's mozila */
}
    .png , .jpg
    {
        position:absolute;
        left:50%;
        top:50%;
    }
    .png
        {
            margin-top: <put here half of the height of png>
            margin-left: <put here half of the width of png>
        }

добавить класс jpg к изображению jpg

ОБНОВЛЕНИЕ: Я снова отредактировал, это работает для меня ...
убедитесь, что ваш тд достаточно большой