Код для центрирования изображений подстановки видового экрана с использованием HTML и CSS

Question

Я использовал как HTML, так и CSS код для центрирования верхней части страницы баннера.С разрешением 600 пикселей он слишком широк для мобильных телефонов, поэтому я также заменяю изображение размером 310 пикселей для видовых экранов мобильных телефонов.После изменения кода jmore009 я понял, что это работает и проверяет.Но мне пришлось использовать центрирующий код как в HTML, так и в CSS.Это правильный способ центрировать его?

HTML 4.01 код:

<div class="centered">
    <img src="images/short_banner.gif" alt="MYSITE.COM" class="image2">
    <img src="images/long_banner.gif" alt="MYSITE.COM" class="image1">
</div>

Код CSS 3.0:

.image2{
   display: none;
}
@media only screen and (max-width: 600px)
   {
   .image1 {
         display: none;
       }
    .image2 {
         display: block;margin:0 auto;
       }
    }

div.centered {
    margin: 0 auto;
    text-align: center;
}

Я не смог получить короткий баннер по центрубез использования DIV.Должен быть лучший способ центрировать оба изображения баннеров без использования центрирования в HTML и CSS-коде.