1 Востаннє редагувалося Адріян Ігорович (07.01.2013 15:44:58)

Тема: Вирівняти картинку по центру блоку

Вітаю.
Оскільки я html і сss не сильний, тому мушу просити у вас допомоги.
Є влсне отакий div:

<div class="block" id="7" >
<img src="/uploads/6.png" width="10" height="10" />
</div>
 

і до нього прикручений css:

.block
{
width: 10px;
height: 10px;
float: left;
} 

Ну відповідно в цьому div-i має бути картинка 10x10, тобто по ідеї картинка має повністю заповнювати блок 10x10,
але з невідомих мені причин, картинка сповзає трохи нище.
Ось приклад:
http://hanter.name/files/replace/%D0%B7%D0%BD%D1%96%D0%BC%D0%BE%D0%BA1.png
Як бачите, картинка сповзає до нижнього блоку. Кожен синій квадратик це окремий div.
Ті 3 картинки, мають рівнятися з верхніми блоками, але чомусь цього не відбувається.
Підкажіть у чому справа.

2

Re: Вирівняти картинку по центру блоку

vertical-align: top;

Якщо я вірно вловив суть проблеми.

I belong to the Dead Generation.
Подякували: Адріян Ігорович1

Re: Вирівняти картинку по центру блоку

Bartash написав:
vertical-align: top;

Якщо я вірно вловив суть проблеми.

Все, вірно, дякую.

4

Re: Вирівняти картинку по центру блоку

А ще краще щоб забезпечити всім вашим проектам кросбраузерність добавте в боді
margin:0;
padding:0;

5 Востаннє редагувалося Bartash (09.01.2013 22:41:06)

Re: Вирівняти картинку по центру блоку

Vo_Vik написав:

А ще краще щоб забезпечити всім вашим проектам кросбраузерність добавте в боді
margin:0;
padding:0;

Зайвим не буде. Принаймні, для випадку з ІЕ. Однак опціонально.
І дещо не в тему до теми.

I belong to the Dead Generation.

6

Re: Вирівняти картинку по центру блоку

Ну чого не в тему, наприклад не було б відступів навколо картинок, якщо вони всі одного розміру, і відповідно не треба було би рівняти по вертикалі.

7

Re: Вирівняти картинку по центру блоку

Vo_Vik написав:

Ну чого не в тему, наприклад не було б відступів навколо картинок, якщо вони всі одного розміру, і відповідно не треба було би рівняти по вертикалі.

Семантично vertical-align та margin відповідають за різні сутності. Перша - за вирівнювання вмісту, друга - за відступи. Звісно, можна і відступами досягти результату, але фактично код виконає не поставлену задачу, а близьку до неї за змістом, а тому за необхідності подальших модифікацій коду відповідно до вимог граблям буде надано невелику фору, що в ендшпілі гри програміста зі своїм кодом може бути вкрай суттєвим.

I belong to the Dead Generation.

8

Re: Вирівняти картинку по центру блоку

Ну правильно різні сутності. Але при нульових відступах оті темно сині прямокутники були б того ж самого розміру, що і картинка, і відповідно ніякого центрування не треба було б.

9

Re: Вирівняти картинку по центру блоку

Vo_Vik написав:

Ну правильно різні сутності. Але при нульових відступах оті темно сині прямокутники були б того ж самого розміру, що і картинка, і відповідно ніякого центрування не треба було б.

Перестаньте спамити. Що значить при нульових відступах, автор теми написав чітко завдання, це не означає що в нього 1н випадок і все. Бувають задачі що навіть коли margin:0; padding:0; все рівно треба вирівняти картинку по центрі