GoldenLine
Zaloguj się

konto usunięte

Temat: Vertical Align w Inline Block

Witam

Mam taki problem.



<div class="Item">

<img class="Icon" src="7924235_t.jpg"/>

</div>



/* CSS */



.Item {

width: 64px;

height: 64px;

color: #333333;

font-size: 18px;

overflow: hidden;

display: inline-block;

position: relative;

line-height: 64px;

vertical-align: middle;

}



Item>IMG {

max-width: 54px;

max-height: 54px;

width: auto; /* 54px; */

height: auto; /* 54px; */

margin-left: auto;

margin-right: auto;

position: static; /*relative;*/

display: table-cell; /* table-cell; */

vertical-align: middle;

}


Mam listę elementów Item, każdy z IMG w środku (takich jak na początku). Powyższy kod pozwala mi je wyśrodkować w poziomie, ale nie wiem jak to wyśrodkować w pionie.

Czy ktoś miałby jakiś pomysł jak to rozwiązać?

Z góry dziękuję.

ps. Chciałbym dodać, że pewne rzeczy muszą pozostać. Tzn div musi być inline-block, a wymiary w IMG muszą zostać właśnie takie (chodzi o zachowanie proporcji obrazka). Całość musi działać pod Operą. Szczerze mówiąc, skończyły mi się pomysły...Mariusz Klimek edytował(a) ten post dnia 07.03.11 o godzinie 16:39
Link do wypowiedziLink
Marcin Pawlas

Marcin Pawlas kocham poniedziałek

Temat: Vertical Align w Inline Block

kontener rodzic musi mieć display: table-cell jeśli chcesz pozycjonować element w środku jak valign w td za pomocą vertical-align

jeśli cały blok chcesz mieć jako inline-block to użyj zagnieżdżonych kontenerów:

<div style="display: inline-block">
<div style="display: table-cell">
<img src="" />
</div>
</div>Marcin Pawlas edytował(a) ten post dnia 07.03.11 o godzinie 16:58
Link do wypowiedziLink
Marcin Pawlas

Marcin Pawlas kocham poniedziałek

Temat: Vertical Align w Inline Block

czyli w Twoim przypadku:

<div style="display: inline-block">
<div class="Item">
<img class="Icon" src="7924235_t.jpg"/>
</div>
</div>

.Item {
width: 64px;
height: 64px;
color: #333333;
font-size: 18px;
overflow: hidden;
display: table-cell;
position: relative;
line-height: 64px;
vertical-align: middle;
}

Item>IMG {
max-width: 54px;
max-height: 54px;
width: auto; /* 54px; */
height: auto; /* 54px; */
margin-left: auto;
margin-right: auto;
position: static; /*relative;*/
display: table-cell; /* table-cell; */
vertical-align: middle;
}

oczywiście jeśli Ci potrzebne to wszystko w tych stylach bo szczerze mówiąc to wygląda to nadmiarowo ale nie osądzam nie widząc otoczenia ;)
Link do wypowiedziLink

konto usunięte

Temat: Vertical Align w Inline Block

Dzięki :-) Wypróbuję :-)
Link do wypowiedziLink

konto usunięte

Temat: Vertical Align w Inline Block

Udało mi się. Aczkolwiek musiałem dodać do pierwszego diva vertical-align: middle. Wówczas wszystko jest tak jak docelowo miało wyglądać.
Link do wypowiedziLink
Marcin Pawlas

Marcin Pawlas kocham poniedziałek

Temat: Vertical Align w Inline Block

ciesze się i powodzenia w dalszej pracy ;)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Vertical-Align w liście




Wyślij zaproszenie do
Anuluj