1. Куча / Говнокод #11862

    +130

    1. 01
    2. 02
    3. 03
    4. 04
    5. 05
    6. 06
    7. 07
    8. 08
    9. 09
    10. 10
    11. 11
    12. 12
    13. 13
    14. 14
    15. 15
    16. 16
    17. 17
    18. 18
    19. 19
    20. 20
    21. 21
    22. 22
    23. 23
    24. 24
    25. 25
    26. 26
    27. 27
    28. 28
    29. 29
    30. 30
    31. 31
    32. 32
    33. 33
    34. 34
    35. 35
    36. 36
    37. 37
    38. 38
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centering div content in 2012 using CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>

/* align horizontally */
.fu { width: 100%; text-align: center; }

/* align vertically */
@media all and (min-height:0px) { .fu { margin-top: 0px; }}
@media all and (min-height:2px) { .fu { margin-top: 1px; }}
@media all and (min-height:4px) { .fu { margin-top: 2px; }}
@media all and (min-height:6px) { .fu { margin-top: 3px; }}
@media all and (min-height:8px) { .fu { margin-top: 4px; }}
@media all and (min-height:10px) { .fu { margin-top: 5px; }}
@media all and (min-height:12px) { .fu { margin-top: 6px; }}
@media all and (min-height:14px) { .fu { margin-top: 7px; }}
@media all and (min-height:16px) { .fu { margin-top: 8px; }}
@media all and (min-height:18px) { .fu { margin-top: 9px; }}
@media all and (min-height:20px) { .fu { margin-top: 10px; }}
@media all and (min-height:22px) { .fu { margin-top: 11px; }}
.....
.....
.....
@media all and (min-height:1994px) { .fu { margin-top: 997px; }}
@media all and (min-height:1996px) { .fu { margin-top: 998px; }}
@media all and (min-height:1998px) { .fu { margin-top: 999px; }}


</style>
</head>
<body>
<div class="fu">horizontally and vertically centered</div>
</body>
</html>​

    Центрируем содержимое дива по горизонтали и вертикали :) http://jsfiddle.net/ykrBh/

    Запостил: makc3d, 02 Октября 2012

    Комментарии (7) RSS

    • ava Stud 02.10.2012 21:41 # 0

      Самое печальное - вижу же что ярый говнокод, но как точно он работает - я не знаю
      Ответить

    • ava bormand 02.10.2012 21:46 # +2

      Кстати раз уж "in 2012", надо было довести до min-height:2012px ;)
      Ответить

    • ava Snickers 03.10.2012 12:50 # 0

      этим маргином тупо пол блока отрубается. и получается что содержимое находится не по центру, а во второй половине блока. ну в общем говно)
      Ответить

    • ava ZX_Spectrum 04.10.2012 23:40 # 0

      дважды говно - по смыслу и по исполнению
      Ответить

      • ava makc3d 04.10.2012 23:42 # 0

        я старался )
        Ответить

      • ava makc3d 04.10.2012 23:45 # 0

        вообще я увидел такую конструкцию на http://rsd.joshemerson.co.uk/ и просто развил идею.
        Ответить

    Добавить комментарий