Problem z wyświetlaniem tekstu w divie

wersja skryptu MyBB: 1.8
adres forum: obojetni.xaa.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Otóż zrobiłem takie dwie jakby ramki po bokach i chciałbym w jednej wstawić ikonkę a w drugiej ostatni post. Wygląda to tak jak na 1 screenie. Problem jest w tym, że chciałbym aby tekst był wyświetlany centralnie w środku tej ramki (próbowałem już wielu sposobów (marginesy, padding itp.). I jeszcze jedno: w kodach css tych ramek mam ustawione opacity. Co zrobić żeby to działało tylko na ramkę, a tekst w środku został nieprzeźroczysty?



forumbit_depth2_forum:

<tr>
<td class="{$bgcolor}" align="center" valign="top" width="169"><div style="margin-top: 45px; margin-left: 12px;"><div style="margin-top: 42px;"><div class="dzial_icon">IKONKA</div></div></div></td>
  <td class="{$bgcolor}" valign="top" align="center" width="377"><div style="margin-left: 11px;">
    <strong><a href="{$forum_url}"><span class="tytuldzialu"><center><div style="position: relative; top: 10px; z-index: 1;"><div style="position: relative; top: -12px;">{$forum['name']}</div></div></center></span></a></strong>{$forum_viewers_text}<div class="smalltext"><center><div style="position: relative; top: -12px;">{$forum['description']}{$modlist}</div></center></div></div></div>
</td>
<td class="{$bgcolor}" valign="top" align="right" style="width: 1%;"></td>
  <td class="{$bgcolor}" valign="top" align="center" style="width: 169px;"><div style="margin-top: 45px; margin-right: 15px;"><div class="dzial_lastpost">{$lastpost}</div></div></td>
</tr> 


Css dla ikonki:

.dzial_icon {
border-radius: 2px;
width: 80px;
background: #f9f9f9;
border-top: 2px solid #b8b8b8;
border-bottom: 2px solid #b8b8b8;
padding: 12px;
opacity: 0.7;
height: 70px;
    -moz-box-shadow:
        5px 0 5px -5px #9f9f9f,
        -5px 0 5px -5px #9f9f9f;
    -webkit-box-shadow:
        5px 0 5px -5px #9f9f9f,
        -5px 0 5px -5px #9f9f9f;
    box-shadow:
        5px 0 5px -5px #9f9f9f,
        0px 0px 5px #9f9f9f,
        -5px 0 5px -5px #9f9f9f;
} 


Css dla ostatniego posta:

.dzial_lastpost {
border-radius: 2px;
width: 130px;
background: #f9f9f9;
border-top: 2px solid #b8b8b8;
border-bottom: 2px solid #b8b8b8;
padding: 12px;
opacity: 0.7;
height: 70px;
    -moz-box-shadow:
        5px 0 5px -5px #9f9f9f,
        -5px 0 5px -5px #9f9f9f;
    -webkit-box-shadow:
        5px 0 5px -5px #9f9f9f,
        -5px 0 5px -5px #9f9f9f;
    box-shadow:
        5px 0 5px -5px #9f9f9f,
        0px 0px 5px #9f9f9f,
        -5px 0 5px -5px #9f9f9f;
} 


Umarłbym ze szczęścia gdyby mi ktoś podał od razu poprawione kody :szczerbol:

w kodach css tych ramek mam ustawione opacity. Co zrobić żeby to działało tylko na ramkę, a tekst w środku został nieprzeźroczysty?

Usuń opacity i użyj przeźroczystości w tle, zapisując background w formacie rgba (google)

Problem jest w tym, że chciałbym aby tekst był wyświetlany centralnie w środku tej ramki

Albo robisz wszystko na paddingach: Usuwasz height, width i dajesz np.

padding: 50px;
display: inline-block;

(z każdej strony tekstu będzie taka sama odległość.
Drugi sposób: określasz wysokość, szerokość -> dodajesz

text-align: center; /*centrowanie w poziomie */
display: table-cell;
vertical-align: middle; /*centrowanie w pionie */

Chciałbym żeby każda ramka miała taką samą szerokość i wysokość. :/

No to sposób nr 2. Warto samemu popracować i dojść jak to powinno wyglądać. Dostałeś zarys jak to powinno wyglądać.

Kombinowanie raczej mi nie wychodzi :/

http://codepen.io/Matslom/pen/BNpPXQ
Popatrz na sposób nr. 2 i odpowiedz sobie czym on się różni od tego co napisałem w poście. Po prostu leniłeś się pomyśleć i chwile się nad problemem zastanowić.