Back to site

Вертыкальнае цэнтраванне ў CSS

Канчатковае рашэнне па 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 ўключаны). Але такія пісьмовыя ўласцівасць нябачным для любой іншай стандартны браўзэр (напрыклад, правадыр інтэрпрэтуе _ пазіцыю: абсалютная, у адрозненне ад іншых браўзэраў). Падкрэсліваем ўзламаць, здаецца, у сіле, але калі вы не жадаеце выкарыстоўваць яго, вы можаце выкарыстоўваць больш структураваны код (не для 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 05/02 для 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-стыляў для кожнага браўзэра
CSS-стыляў для стандартных браўзэраў

CSS стыль для Internet Explorer толькі (з хак #)

Вынік выглядае:

любы тэкст
любой вышыні
любы кантэнт, напрыклад, генеруецца з БД
усё центрирован

Глядзіце гэты прыклад у браўзэры

Давайце зробім гэта без структурных і хакі

УВАГА (кастрычнік 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>

Глядзіце сапраўдныя напрыклад, у браўзэр (ён выглядае так жа, як апошняя).

Колер легенда:

CSS style for Internet Explorer only
CSS styles for standard browsers

CSS2 селектара #value[id] эквівалентна селектар #value, але Internet Explorer ігнаруе гэтыя тыпы селектарам. Наогул: сінтаксіс *[foo] азначае любы элемент з атрыбутам foo. Любы HTML-элемента # што-то павінны мець атрыбут ID усталяваны на "што-то". Гэта трук - #value[id] працуе ў стандартных браўзэрах толькі (падобна работ значэнне [класа].)

Там у CSS маёмаснае становішча ўсталявана ў абсалютных ці адносных для браўзэра Internet Explorer. Код position: static атрымаць яго назад у значэнне па змаўчанні ў стандартных браўзарах (уласнасць топ не працуе, у той час).

Абодва вертыкальнай і гарызантальнай цэнтроўкі

Асноўны код будзе такім жа, трэба проста дадаць некаторыя дадатковыя правілы CSS. Калі ваша старонка ў стандартным рэжыме, дадайце наступны код:

<style>
# {Знешняя шырыня: 100%;}
# {Унутраная шырыня: 200px; маржа левы: аўто; розніцы-направа: аўто;}
</ STYLE>

Як вы, напэўна, бачыце, гэта найбольш распаўсюджаны метад гарызантальнага цэнтравання - левы аўто і правага поля. Таму што палі запатрабаванні прастору ў Firefox і Opera, вам неабходна ўсталяваць шырыню # вонкавай спраў. Калі 100% не адпавядаць вашым патрэбам, выкарыстоўвайце любое іншае значэнне.

Важна, каб усталяваць некаторыя належнай шырыні # ўнутраны. Гэтая старонка аб вертыкальнай цэнтроўкі аб'екта з невядомай вышыні. Я мяркую, што вы ведаеце, шырыня аб'екта (у большасці выпадкаў вам проста вырашыць, наколькі шырока гэта павінна быць). Вы можаце выкарыстоўваць значэння пікселяў, ці адсотак шырыні. Калі ў цэнтры аб'екта толькі невядомага памеру малюнка, вам не трэба ўсталёўваць шырыню. Ён павінен працаваць, а не.

Калі вы выкарыстоўваеце дзівацтва рэжым адмалёўкі старонкі (рэжым залежыць ад! Doctype, як вы ведаеце), дадаў код павінен быць трохі больш часу, так як дзівацтва рэжыме Exploder не разумее аўтаматычнага поля, але мае адно прыемнае памылку ў тэксце выраўноўвання інтэрпрэтацыі, а не. Гэты код павінен працаваць для стандартных і дзівацтва рэжыме:

<style>
# {Знешняя шырыня: 100%;}
# {Сярэдняя шырыня: 100%; выраўноўвання тэксту: цэнтр;}
# {Унутраная шырыня: 200px; маржа левы: аўто; розніцы-направа: аўто; выраўноўвання тэксту: злева;}
</ STYLE>

Калі ласка, звярніце ўвагу, што гэта толькі частка кода, які вы павінны дадаць да папярэдняга прыкладу. Калі вы гультаяватыя, каб аб'яднаць коды можна знайсці поўны прыклад у браўзэры: вертыкальная і гарызантальная цэнтроўка. Вы ведаеце, я гультаяваты таксама.

Як цэнтр па вертыкалі на вышыню акна

Сапраўды гэтак жа і проста дадаць стыль:

<style>
цела, HTML {вышыня: 100%;}
# {Знешняя вышыня: 100%; перапаўненне: бачны;} / * або без перапаўнення * /
...
</style>

Здаецца, што # вонкавай заява павінна быць досыць, але гэта не так. Цела і HTML аб'яву устанаўлівае 100% ад вышыні акна ў якасці базы для наступнага адсотках. Цяпер лепш не ўсталёўваць перапаўненні: утоены (як у прыкладах вышэй), таму што, калі ўтрыманне будзе вышэй, чым акно, то было б немагчыма пракруціць далей.

Я буду абнаўляць гэты артыкул з вялікай колькасцю інфармацыі, калі хочаце.

Упершыню апублікавана 21 верасня 2004 г., абноўлены 23 Кастрычніцкай 2006 і 25 мая 2008 года.

Аўтар:

Душан Янаўскі
Красавік Yuhů
janovsky@gmail.com
www.jakpsatweb.cz

Анатоль Papirovsky мае тую ж ідэю самастойна мне 05:00 пазней.

Published (Last edited): Jul 10 , source: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html