вертикальное выравнивание div блоков

61

Green arrow

22 октября 2013, 18:46

1056

Здравствуйте.

Форумчане, требуется ваша помощь, несколько часов пытался сделать не получилось. Итак, макет:

Суть: 4 блока, в каждом блок с ИМГ и блок с ссылкой. Ширина фиксированная (180px), высота плавающая. Задача: ИМГ вертикально по серёдке сделать, а вот название к полу прижать. Первое я смог, но второе никак, т.к. схема первого мешала, короче бардак...

Вложенность можете выбрать свою, если требуется, главное вертикальное выравнивание осуществить и сделать это максимально кроссбраузерно (6 ослик можно не брать в расчёт).

C

291

Chukcha

22 октября 2013, 20:38

#1

таблица - и не волноваться

N

42

n1zee

23 октября 2013, 11:38

#2

Green arrow:
Здравствуйте.
Форумчане, требуется ваша помощь, несколько часов пытался сделать не получилось. Итак, макет:

Суть: 4 блока, в каждом блок с ИМГ и блок с ссылкой. Ширина фиксированная (180px), высота плавающая. Задача: ИМГ вертикально по серёдке сделать, а вот название к полу прижать. Первое я смог, но второе никак, т.к. схема первого мешала, короче бардак...

Вложенность можете выбрать свою, если требуется, главное вертикальное выравнивание осуществить и сделать это максимально кроссбраузерно (6 ослик можно не брать в расчёт).

Используйте такое замечательное свойство как padding🍿

278

кот Бегемот

23 октября 2013, 12:29

#3

Вероятно надо использовать свойства display: block Отступ задать margin: [значение | проценты | auto] а для отступов внутри блока использовать свойство padding

Яндекс Директ, Гугд адворс, не дорого и ответственно. Телеграмм @H_Ilin

79

Olldman

23 октября 2013, 15:59

#4

Как то так (и никаких лишних блоков):

<!DOCTYPE html>
<html>
  <head>
  <meta charset="windows-1251">
  <title>IMG Center</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  ul{list-style:none;}
  ul li{width:180px;float:left;text-align:center;}
  ul li img{display:block;margin:0 auto;/*padding:0 0 10px 0; (если нужен бОльший отступ от картинки вниз)*/}
  </style>
  </head>
  <body>
      <ul>
        <li><img src="ferari.jpg" alt=""><a href="#">Ferrari</a></li>
        <li><img src="merc.jpg" alt=""><a href="#">Mercedes</a></li>
        <li><img src="mazda.jpg" alt=""><a href="#">Mazda</a></li>
        <li><img src="chevrolet.jpg" alt=""><a href="#">Chevrolet</a></li>
      </ul>
  </body>
</html>

1

119

vlad00777

24 октября 2013, 09:05

#5

Padding не получится использовать. Нужно делать таблицей или дивами и скрипт например этот http://ruseller.com/adds.php?rub=11&id=2483

Только нужно использовать при вызове проверку на загрузку картинок, а не просто дом.

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.

140

Konceptovskiy

24 октября 2013, 09:22

#6

Напишите код вашего блока(одного с картинкой и ссылкой) и к нему то что прописано в стилях к блоку(ну ко всем дивам относящихся к блоку)

209

Ayavryk

24 октября 2013, 09:37

#7

UPD sorry не углядел условие

Тынгыр, мынгыр, комсомол (http://erum.ru). Ехари, ехари, (жалобно) аяврик. /народная тунгусская песня/

15

webim

24 октября 2013, 09:44

#8

*{margin:0;padding:0;}
  ul{list-style:none;}
  ul li{width:180px;display:table-cell;text-align:center; border: 1px solid #000; height:300px;vertical-align:middle; position: relative;}
  ul li img{display:block;margin:0 auto;/*padding:0 0 10px 0; (если нужен бОльший отступ от картинки вниз)*/}
  ul li a {position: absolute; bottom: 0;}

использовал исходный код Olldman'а

пожалуйста

1

GA

61

Green arrow

25 октября 2013, 16:00

#9

Olldman, спасибо, ваш вариант хорош, хотя table-cell и vertical-align middle всё же пришлось использовать.

Вообще я тогда тормознул, я знаю максимальную высоту блока с имг (сам же через стили и выставил макс-высоту для имг), а значит и могу всё остальное сделать, даже скажу больше сделал, вот только какой-то косяк именно в ИЕ 8. Почему-то с этим расчётом ширины четвёртый блок (если на дивах) не помещается, если списком, то влезает всё в одну строку, однако выравнивания по центру в самом главном (сером) блоке нет. Скажите, что восьмой ослик как-то по-своему пиксели считает?

Лидирующая система статейного маркетинга. Google AdSense - Вопросы VPS +1 IP +

79

Olldman

26 октября 2013, 01:59

#10

Green arrow:
Скажите, что восьмой ослик как-то по-своему пиксели считает?

- Скажем так - любой ослик не осиливает расчет отступов, ну .... напряженка с этим делом у дядюшки Била.:) - это раз. Ну и свойство table-cell - может не понимать (не утверждаю, т.к. у мя токма 7-ка стоит), да и я стараюсь не пользовать это свойство там, где оно не нужно, опять жеж учитывая присутствие семейства ишачих в инете.😂

Хитрости поиска: Используйте неверный Сергей Протасов (Рамблер): «Поведенческие Google: мы учитываем релевантность

VK приобрела 70% в структуре компании-разработчика red_mad_robot

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта