Пераклад на беларускую мову Patricia Clausnitzer
Канчатковае рашэнне ў Yuhu з невядомымі Вышыня
Хоць ёсць уласцівасць CSS вертыкальнага выраўноўвання, ён не працуе, як атрыбут VALIGN табліц HTML. CSS уласнасці вертыкальнага выраўноўвання-бачнаму, не зможа вырашыць гэту праблему:
Вызначэнне праблемы
- ёсць вобласці (напрыклад, <div>) з вядомай вышыні на старонцы
- унутраны аб'ект (як правіла, доўгі тэкст у <div>) знаходзіцца ўсярэдзіне вобласці, і я не ведаю яго вышыні (напрыклад, таму што яго ўтрыманне дынамічна з базы дадзеных)
- Я жадаю, каб цэнтр аб'екта вертыкальна усярэдзіне вобласці
- без выкарыстання HTML табліц.
Няма агульнага рашэння было вядома да ўчорашняга дня. Я знайшоў яго хаты на вуліцы Ўілсан. Гл. прыклад у браўзары.
Ідэя
Закладам рашэнні ў Internet Explorer: унутраны аб'ект абсалютна размешчаны на палове вышыні вобласці. Затым перасоўваецца ўгару на палову яго вышыні. Няправільная інтэрпрэтацыя вышыні ўласнасці ў Internet Explorer выкарыстоўваецца (улічваецца вышыня бярэцца як аснова адсотках ад укладзеных тэгаў). Адзін дадатковы ўкладзены тэг <div> неабходна для Explorer.
Рашэнне для стандартных браўзараў, як Mozilla, Opera, Safari т.д. ідзе зусім інакш. Цэлыя вобласці (угары <div>) усталявана, якое будзе адлюстроўвацца ў выглядзе табліцы (дысплей: табліцы, частка CSS2). Унутранага аб'екта ўсталёўваецца ў табліцы вочка (дысплей: настольны клеткі). Але - няма розуму - гэта магчымасць выкарыстання вертыкальнага выраўноўвання ўласнасці на такі элемент адлюстроўваецца ў стандартных браўзарах. (Інтэрнэт-Exlorer ігнаруе гэтыя ўласцівасці, ці не ведаю іх значэнні.)
Тады як сінтаксіс аб'яднаны. Я выкарыстоўваю Pixy у хак з падкрэсленнем, але са знакам #. CSS уласнасці, напісаныя з падкрэслення на старце стала відавочным для Internet Explorer (усе версіі, але IE 7), уласнасці # з самага пачатку стала відавочным для ўсіх IE версіі (IE7 уключана). Але такія пісьмовыя ўласнасці нябачным для любой іншай стандартны браўзар (напрыклад, Explorer інтэрпрэтуе _ пазіцыю: абсалютная, у адрозненне ад іншых браўзараў). Падкрэсліваем, секчы, як уяўляецца, у сіле, але калі вы не жадаеце выкарыстоўваць яго, вы можаце выкарыстоўваць больш структураваны код (не для IE 7).
Сумяшчальнасць
Код працуе ў Internet Explorer 5.0, 5,5 і 6,0, у браўзарах Gecko (Mozilla, Firefox, Netscape 7), у Opera 7, Konqueror 3.3.1. (Магчыма, ніжэй таксама), і ў Safari. Старонка можа быць HTML ці XHTML, стандартны ці дзівацтва рэжыме.
Абодва прыкладу не працуюць у IE 5.2 для Mac. Як я ўжо не Mac, я не магу праверыць яго. Калі ласка, дайце мне ведаць ( dusan@pc-slany.cz ), калі вы жадаеце знайсці абыходны шлях.
Зразумела код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display:
table; height: 400px; #position:
relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>Гл. прыклад у браўзары
Пазначэнні для кветак:
CSS styles for every browser
CSS styles for standard browsers
CSS style for Internet Explorer only (with # hack)Вынік будзе выглядаць:
Давайце зробім гэта і без структурных хакі
НАТАТКА (кастрычнік 2006): правільнае рашэнне апісаных ніжэй не працуе ў Internet Explorer 7 (стандартны рэжым), бо IE7 не разумее табліцу значэнняў на дысплеі ўласнасці. Калі ласка, выкарыстоўвайце несапраўднымі рашэнні вышэй, пакуль хто-небудзь знайсці сапраўдны секчы для IE7 (ці пісаць на дзівацтва рэжыме).
Прыклад вышэй, не выдатна, але я спадзяюся, вы зразумелі. Можна напісаць код па-рознаму. Напрыклад, вось так:
<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>І структураваных сапраўдны стыль:
<style type="text/css">
#outer {height: 400px; overflow: hidden; position:
relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align:
middle; width: 100%;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>Гл. сапраўдны напрыклад, у браўзары (яна выглядае гэтак жа, як апошнія 1).
Колер легенда:
CSS style for Internet Explorer only CSS styles for standard browsers
CSS2 селектар #value[id] эквівалентна селектар #value , але Internet Explorer ігнаруе гэтыя тыпы селектараў. Увогуле: сінтаксіс *[foo] азначае любы элемент з атрыбутам foo . Любы элемент HTML # штосьці павінна мець атрыбут ID усталяваны ў "нешта". Гэта трук - #value[id] працуе ў стандартных браўзэраў (аналагічна працуе. значэнне [класа])
Там's CSS маёмаснае становішча ўсталявана ў абсалютных ці адносных для Internet Explorer. Код position:static атрымаць яго зваротна ў значэнне па змаўчанні ў стандартных браўзарах (верхняй уласнасці не працуе, у той час).
Вертыкальнага і гарызантальнага цэнтравання
Асноўны код будзе такім жа, вам трэба проста дадаць некаторыя дадатковыя правілы CSS. Калі ваша старонка ў стандартным рэжыме, дадаць гэты код:
<style>
#outer {width: 100%;}
#inner {width: 200px; margin-left: auto; margin-right: auto;}
</style>
Як вы, верагодна, бачыце, гэта з'яўляецца найболей распаўсюджаным метадам гарызантальнага цэнтравання - аўта левага і правага краю. Таму што палі запатрабаванняў прасторы ў Firefox і оперы, вам неабходна ўсталяваць шырыню # вонкавай спраў. Калі 100% не адпавядае вашым запатрабаванням, выкарыстоўваць любыя іншыя каштоўнасці.
Важна, каб усталяваць некаторыя належнай шырыні # унутранай. Гэта старонка пра вертыкальную цэнтроўкі аб'ект з невядомай вышыні. Я мяркую, што вы ведаеце, шырыня аб'екта (у большасці выпадкаў вам проста вырашыць, наколькі шырока ён павінен быць). Вы можаце выкарыстоўваць значэнні пікселяў, ці шырыня ў адсотках. Калі ў цэнтры аб'екта толькі невядомага памеру малюнка, вам не трэба ўсталёўваць шырыню. Ён павінен працаваць, а не.
Калі вы выкарыстоўваеце дзівацтва аказання старонкавы рэжым (рэжым залежыць! Doctype, як вы ведаеце), дадаў код павінен быць трохі больш, бо дзівацтва рэжыме Exploder не разумее, аўтаматычна палі, але адзін добры памылку ў тэксце выраўноўвання інтэрпрэтацыя, а не . Гэты код павінен працаваць на стандартных і дзівацтва Рэжым працы:
<style>
#outer {width: 100%;}
#middle {width: 100%; text-align: center;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align:
left;}
</style>
Калі ласка, звернеце ўвагу, што гэта толькі частка кода, які трэба дадаць да папярэдняга прыкладу. Калі вы гультаяваты, каб аб'яднаць коды, гл. поўны прыклад у браўзары: вертыкальнае і гарызантальнае цэнтраванне. Вы ведаеце, я гультаяваты занадта.
Як цэнтр вертыкальна на вышыню акна
Сапраўды гэтак жа і проста дадаць стыль:
<style>
body, html {height: 100%;}
#outer {height: 100%; overflow: visible;} /* or without overflow */
...
</style>
Здаецца, што # вонкавай заява павінна быць досыць, але гэта не так. Цела і HTML дэкларацыі набораў 100% ад вышыні акна ў якасці асновы для наступнага адсотках. Цяпер лепш не ўсталёўваць перапаўненні: утоены (як у прыкладах вышэй), таму што, калі ўтрыманне будзе вышэй, чым акно, тое яно было б немагчыма прагорткі.
Я буду абнаўляць гэты артыкул з дадатковай інфармацыяй, калі жадаеце.
Упершыню апублікавана 21 верасня 2004, абнаўленне 23 кастрычніка 2006 і 25 траўня 2008.
Аўтар:
Dušan Janovský
aka Yuhů
janovsky@gmail.com
www.jakpsatweb.cz
Дзякуй за тэставанне: Chose, Lukáš Mačí, Pixy и Daniel Wallace.
Anatoly Papirovsky мае тую ж ідэю самастойна мне 5 гадзін.
