wyśrodkowanie obrazka w pionie...

[kuba]

Witam,
chcę zrobić coś takiego jak na obrazku:


czyli dwa divy obok siebie (obydwa wycentrowane względem strony) a w nich obrazki wycentrowane w pionie a obok nich tekst

narazie udało mi się w ten sposób wycentrować obrazek w pionie, ale niewiem już jak zrobić żeby tekst był przy obrazku ani żeby dwa obydwa divy znalazły się obok siebie

CSS:

Kod:

#table{
    width: 300px;
    height: 150px;
    display: table;
    text-align:left;
    background-color: #ffffff;
}

#cell{
    display: table-cell;
    vertical-align: middle;
}

HTML:

Kod:

<div id="table">

<div id="cell">
<img src="ikony/1.jpg">
</div>

<div id="cell">test</div>

</div>

jakieś pomysły?

[dziamber]

Może na początek wykorzystuj jedno id dla jednego elementu. Jak już chcesz to samo dla kilku elementów to zastosuj klasy

[kuba]

no fakt

teraz się udało też umieścić te dwa divy obok siebie ale z resztą dalej mi nie wychdzi

[dziamber]

Z jaką resztą? Bo nie za bardzo jestem w temacie

[Leja]

też czytam i nie bardzo rozumiem chcesz wyśrodkować ten div

Kod:

<div id="cell">test</div>

[Vibovit]

Mam problem odnośnie wyśrodkowania obrazka tak by był on zawsze w tym samym miejscu bez względu na to jaką się ustawi rozdzielczość ekranu.

Mam tło ustawione i teraz na to centralnie na środku chcę dać obrazek. Natomiast aktualnie jest tak, że jak zwiększam czy zmniejszam rozdzielczość to obrazek albo jest zupełnie na samej górze zamiast być w centralnej części strony albo nie mieści się w stronie. Bardzo proszę o poradę.

[n0xx]

<div id="wrapper">
<div class="box_wrapper">
<div class="box_img"><img src="..."/></div><!--end box_img-->
<div class="box_txt">tu idzie tekst</div><!--end box_txt-->
</div><!--end box_wrapper-->
</div><!--end wrapper-->




#wrapper {
width:xx;
height:300px;
overflow:hidden;
display:block;
position:relative;
margin:0 auto;
}
.box_wrapper{
width: 300px;
height: 150px;
display: table;
background-color: #ffffff;
overflow:hidden;
float:left;
position:relative;
}

.box_img{
display: table-cell;
vertical-align: middle;
width:xxx;
max-height:150px;
overflow:hidden;
float:left;
}
.box_txt {
float:left;
display:block;
text-align:left;
width:xxx;
height:150px;
position:relative;
overflow:hidden;
}

winno dać radę