Witam!
Mam pewien problem, chce wycentrować sobię zawartość którą mam w divie tak aby były równe margiesy po obu stronach. Nie jest to trudne jeśli zawartość jest ma stałą szerokość, ustawiam sobie margin, ale u mnie zawartość się zmienia raz jest szersza, a raz węższa.
Próbowałem z margin: 0 auto itp. ale bez skutku.
Mój kod:
<div class="site_pay_container">
<img src="../images/bigdollar_icon.png" alt="Big dollar" id="dollar_icon">
<p class="site_pay_title">zetabux
</p> <p class="site_pay_content">2013-11-25
</p> <p class="site_pay_content">$29.03
</p>
<div class="site_pay_container">
<img src="../images/bigdollar_icon.png" alt="Big dollar" id="dollar_icon">
<p class="site_pay_title">zetabux
</p> <p class="site_pay_content">2013-11-25
</p> <p class="site_pay_content">$29.03
</p>
<div class="site_pay_container">
<img src="../images/bigdollar_icon.png" alt="Big dollar" id="dollar_icon">
<p class="site_pay_title">zetabux
</p> <p class="site_pay_content">2013-11-25
</p> <p class="site_pay_content">$29.03
</p>
<div class="site_pay_container">
<img src="../images/bigdollar_icon.png" alt="Big dollar" id="dollar_icon">
<p class="site_pay_title">zetabux
</p> <p class="site_pay_content">2013-11-25
</p> <p class="site_pay_content">$29.03
</p>
CSS:
#site_pay {
background:url(../images/grad_sitepay.png)repeat-x;
height: 133px;
color: #fff;
}
.site_pay_container {
height: 70px;
width: 150px;
display: inline-block;
margin-left: 87px;
}
.site_pay_container img{
padding-top: 32px;
position: absolute;
}
.site_pay_title {
font: 33px "Segoe";
color: #fff;
font-style: oblique;
font-weight: bold;
padding: 18px 0 0 60px;
text-shadow: 0 0 1px #000
}
.site_pay_content {
font: 14px "Segoe";
color: #A1A1A1;
padding-left: 60px;
}
Teraz jest ustawione poprawnie(tak ma wyglądać zawsze):

ale kiedy nazwy będą dłuższe:

Strzałka pokazuje co się powinno mniej więcej stać, tzn. tekst powinien się przesunąć w lewo (z prawej odpowiednio tyle samo miejsca co z lewej) i powinny się zrobić większe odstępy żeby nazwy na siebie nie nachodziły. Wie ktoś jak coś takiego wykonać? Przekopałem internet w poszukiwaniu takiego centrowania ale bez skutku :/