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

    • Самое печальное - вижу же что ярый говнокод, но как точно он работает - я не знаю
      Ответить
    • Кстати раз уж "in 2012", надо было довести до min-height:2012px ;)
      Ответить
    • этим маргином тупо пол блока отрубается. и получается что содержимое находится не по центру, а во второй половине блока. ну в общем говно)
      Ответить
    • дважды говно - по смыслу и по исполнению
      Ответить
      • я старался )
        Ответить
      • вообще я увидел такую конструкцию на http://rsd.joshemerson.co.uk/ и просто развил идею.
        Ответить

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