Центрирования img в div с поворотом img

[moshkin_ura]

Здравствуйте.
Вот верстка блоков

<div class="all-inv">
<div class="avt1-inv"><div id="avt1"><button title="Оружие1" class="deg"><img src="inv/avt/5.gif"></button></div></div>
<div class="det-inv"><div id="det"><img src="inv/det/1.gif"></div></div>
<div class="br-inv"><div id="br"><button title="Броня Какая-то"><img src="inv/br/1.gif"></button></div></div>
<div class="avt2-inv"><div id="avt2"><div class="deg"><img src="inv/avt/68.gif"></div></div></div>
<div class="art1"><button class="art-style"><img width="40" height="40" src="inv/art/1.gif"></button></div>
<div class="art2"><button class="art-style"><img width="40" height="40" src="inv/art/36.gif"></button></div>
<div class="art3"><button class="art-style"><img width="40" height="40" src="inv/art/59.gif"></button></div>
<div class="art4"><button class="art-style"><img width="40" height="40" src="inv/art/69.gif"></button></div>
<div class="art5"><button class="art-style"><img width="40" height="40" src="inv/art/66.gif"></button></div>
<div class="info-inv"></div>
<div class="pets-inv"></div>
<div class="new-inv"></div>
</div>

и стили

.all-inv {width:560px; height:342px;}/*Всё*/
.avt1-inv {background:url(inv/avt.png) no-repeat; width:104px; height:280px; float:left; display: block;
clear: both;}/*левый автомат*/
.det-inv{background:url(inv/det.png) no-repeat; width:104px; height:78px; float:left;}/*детектор*/
.br-inv{background:url(inv/br.png) no-repeat; width:104px; height:202px; margin:78px 0 0 -104px; float:left;}/*броня*/
.avt2-inv { background:url(inv/avt.png) no-repeat; width:104px; height:280px; float:left;}/*правый автомат*/
.art1{ background:url(inv/art.png) no-repeat; width:62px; height:62px; float:left; margin:280px 0 0 -312px;}/*арт1*/
.art2{ background:url(inv/art.png) no-repeat; width:62px; height:62px; float:left; margin:280px 0 0 -250px;}/*арт2*/
.art3{ background:url(inv/art.png) no-repeat; width:62px; height:62px; float:left; margin:280px 0 0 -188px;}/*арт3*/
.art4{ background:url(inv/art.png) no-repeat; width:62px; height:62px; float:left; margin:280px 0 0 -126px;}/*арт4*/
.art5{ background:url(inv/art.png) no-repeat; width:62px; height:62px; float:left; margin:280px 0 0 -64px;}/*арт5*/
.art-style{line-height:62px; position: relative; width:62px; height:62px; margin-top:8px;}
.info-inv { background:#0F0; width:130px; height:342px; float:left;}/*информация*/
.pets-inv { background:url(inv/pets.png) no-repeat; width:118px; height:126px; float:left;}/*питомец*/
.new-inv { background:#C60; width:118px; height:216px; float:left; margin:126px 0 0 -118px;}
/*/Инвентарь*/
/*Дополнение*/
#avt1{position: relative;right:50%;float: right;}
#avt button {position: relative; z-index: 1;right: -50%;}
#avt2{display:table-cell; vertical-align: middle; text-align:center; width:104px; height:280px;}
#avt2 button{width:280px; height:104px;}
#det{ display:table-cell; vertical-align:middle; text-align:center; width:104px; height:78px;}
#br { display:table-cell; vertical-align:middle; text-align:center; width:104px; height:202px;}
.deg{
    -webkit-transform: rotate(270deg); /* для safari и chrome браузеров */
    -moz-transform: rotate(270deg); /* для FF */
    -o-transform: rotate(270deg); /* для Opera */
    transform: rotate(270deg); /* для остальных браузеров поддерживающий поворот по-умолчанию */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* для ИЕ 6-8 */
}
button {background:none; border:none;}

Как отцентрировать изображение в блоке avt1 и avt2 если это изображение еще повернуто через стиль .deg все перепробовал, изображение то слева, то справа блока...
P.S Изображение может иметь не предсказуемый размер(но больше размера блока не будет)