Css patayong pagkakahanay. CSS centering ng DIV blocks: pahalang at patayo. Pag-align gamit ang padding

Kadalasan sa panahon ng layout ay may pangangailangan para sa patayong pagkakahanay ng teksto sa isang bloke. Kung kailangan itong gawin sa isang table cell, itatakda ang value ng vertical-align CSS property.

Ngunit lumitaw ang isang makatwirang tanong: posible bang gawin nang walang talahanayan, nang hindi na-overload ang layout ng page na may mga hindi kinakailangang tag? Ang sagot ay "magagawa mo," ngunit dahil sa mahinang suporta ng CSS sa MSIE browser, ang solusyon sa problema para dito ay magiging iba sa solusyon para sa iba pang mga karaniwang browser.

Bilang halimbawa, isaalang-alang ang sumusunod na fragment:



Ilang text

at subukang patayo na ihanay ang teksto sa gitna ng bloke at sa ilalim na gilid ng bloke.

Solusyon sa problema

"Tama" na mga browser (kabilang ang MSIE

Karamihan mga modernong browser sumusuporta sa CSS2.1, katulad ng halaga ng table-cell para sa display property. Nagbibigay ito sa amin ng pagkakataong pilitin ang isang bloke ng text na lumabas bilang isang table cell at, sinasamantala ito, ihanay ang teksto nang patayo:

div(
display: table-cell;
vertical-align: gitna;
}

div(
display: table-cell;
vertical-align: ibaba;
}

Internet Explorer (hanggang sa bersyon 7 kasama)

Maaari mong lutasin ang problema ng pag-align ng teksto sa ilalim na gilid ng isang bloke sa MSIE gamit ang ganap na pagpoposisyon (dito kakailanganin namin ang isang elemento ng string na naka-embed sa isang bloke):

div(
posisyon: kamag-anak;
}
div span {
display: block;
posisyon: ganap;
ibaba: 0%;
kaliwa: 0%;
lapad: 100%;
}

Gumagana rin ang hanay ng mga panuntunang ito sa mga "tamang" browser.

Tukuyin ang mga katangian

Div span(
display: block;
lapad: 100%;
}

hindi kinakailangan, ngunit maaaring kailanganin ang mga ito kung, bilang karagdagan sa vertical text alignment, plano mo ring gumamit ng horizontal alignment, halimbawa, text-align: center ;.

Upang patayong ihanay ang teksto sa gitna ng bloke, ang orihinal na fragment ay kailangan pa ring maging kumplikado - magpapakilala kami ng isa pang elemento ng linya:

Materyal na pag-aaralan:

  • Vertical Centering sa CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
  • Vertical centering gamit ang CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
  • Vertical align (www.cssplay.co.uk/ie/valign.html)
  • vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
  • Isa pang paraan ng vertical alignment sa CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Mayroong maraming iba't ibang paraan upang igitna ang isang bagay nang patayo gamit ang CSS, gayunpaman, ang kahirapan ay maaaring sa pagpili ng tama. Titingnan natin ang ilan sa mga ito, at gagawa din ng maliit na website gamit ang kaalamang nakuha.

Ang vertical center alignment ay hindi madaling makamit gamit ang CSS. Maraming paraan at hindi lahat ay gumagana sa lahat ng browser. Tingnan natin ang 5 iba't ibang pamamaraan, pati na rin ang mga kalamangan at kahinaan ng bawat isa sa kanila. Halimbawa.

1st method

Ipinapalagay ng pamamaraang ito na nagtatakda kami ng ilang elemento

paraan ng pagpapakita bilang isang talahanayan, pagkatapos ay maaari naming gamitin ang vertical-align na pag-aari sa loob nito (na iba ang gumagana sa iba't ibang elemento).

Ang ilan kapaki-pakinabang na impormasyon, na dapat ay matatagpuan sa gitna.
#wrapper( display: table; ) #cell( display: table-cell; vertical-align: middle; )

Mga pros

  • Ang nilalaman ay maaaring magbago ng taas nang pabago-bago (ang taas ay hindi tinukoy sa CSS).
  • Hindi puputulin ang nilalaman kung walang sapat na espasyo para dito.

Cons

  • Hindi gumagana sa IE 7 o mas kaunti
  • Maraming nested tag

ika-2 paraan

Gumagamit ang pamamaraang ito ng ganap na pagpoposisyon ng div, na may itaas na nakatakda sa 50% at margin-top na binawasan ang kalahati ng taas ng nilalaman. Ito ay nagpapahiwatig na ang bagay ay dapat magkaroon ng isang nakapirming taas, na tinukoy sa mga estilo ng CSS.

Dahil ang taas ay naayos na, maaari mong itakda ang overflow:auto; para sa isang div na naglalaman ng nilalaman, kaya, kung ang nilalaman ay hindi magkasya, lilitaw ang mga scroll bar.

Nilalaman Dito
#content ( posisyon: absolute; tuktok: 50%; taas: 240px; margin-top: -120px; /* minus kalahati ng taas */ )

Mga pros

  • Gumagana sa lahat ng mga browser.
  • Walang hindi kinakailangang pugad.

Cons

  • Kapag walang sapat na espasyo, mawawala ang nilalaman (halimbawa, ang div ay nasa loob ng katawan at pinaliit ng user ang mga bintana, kung saan ang mga scroll bar ay hindi lilitaw.

ika-3 paraan

Sa pamamaraang ito, ibalot namin ang content div ng isa pang div. Itakda natin ang taas nito sa 50% (taas: 50%;), at ang margin sa ibaba sa kalahati ng taas (margin-bottom:-contentheight;). Ang nilalaman ay mag-clear float at maging centered.

narito ang nilalaman
#floater( float: left; height: 50%; margin-bottom: -120px; ) #content( clear: both; height: 240px; position: relative; )

Mga pros

  • Gumagana sa lahat ng mga browser.
  • Kapag walang sapat na espasyo (halimbawa, kapag nabawasan ang window), hindi na-crop ang nilalaman, lilitaw ang mga scrollbar.

Cons

  • Isa lang ang maiisip ko: na may ginagamit na dagdag na walang laman na elemento.

ika-4 na paraan.

Ginagamit ng pamamaraang ito ang posisyon:absolute; para sa div na may mga nakapirming laki(lapad at taas). Pagkatapos ay itinakda namin ang mga coordinate nito sa itaas:0; ibaba:0; , ngunit dahil mayroon itong nakapirming taas, hindi ito makakaunat at nakahanay sa gitna. Ito ay halos kapareho sa kilalang horizontal center alignment method elemento ng bloke nakapirming lapad (margin: 0 auto;).

Mahalagang impormasyon.
#content( position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 240px; width: 70%; )

Mga pros

  • Napakasimple.

Cons

  • Hindi gumagana sa Internet Explorer
  • Ang nilalaman ay puputulin nang walang mga scroll bar kung walang sapat na espasyo sa lalagyan.

Ika-5 paraan

Gamit ang paraang ito, maaari mong i-center align ang isang linya ng text. Itakda lang ang taas ng text (line-height) pantay na taas elemento (taas). Pagkatapos nito, ang linya ay ipapakita sa gitna.

Ilang linya ng text
#content( height: 100px; line-height: 100px; )

Mga pros

  • Gumagana sa lahat ng mga browser.
  • Hindi pinuputol ang text kung hindi ito kasya.

Cons

  • Gumagana lamang sa teksto (hindi gumagana sa mga elemento ng block).
  • Kung mayroong higit sa isang linya ng teksto, mukhang napakasama.

Ang pamamaraang ito ay lubhang kapaki-pakinabang para sa maliliit na elemento, tulad ng pagsentro ng teksto sa isang pindutan o field ng teksto.

Ngayon alam mo na kung paano makamit ang vertical center alignment, gumawa tayo ng isang simpleng website na magiging ganito ang hitsura:

Hakbang 1

Laging magandang magsimula sa semantic markup. Ang aming pahina ay bubuoin tulad ng sumusunod:

  • #floater (sa gitnang nilalaman)
  • #centred (gitnang elemento)
    • #side
      • #logo
      • #nav (listahan
      • #nilalaman
    • #bottom (para sa mga copyright at lahat ng iyon)

    Isulat natin ang sumusunod na html markup:

    Isang Nakasentro na Kumpanya

    Pamagat ng Pahina

    Holistically muling inhinyero ang value-added outsourcing pagkatapos ng process-centric na pakikipagtulungan at pagbabahagi ng ideya.

    Masigasig na pasimplehin ang mga maimpluwensyang niche market sa pamamagitan ng mga imperative na pinagana. Holistically nangingibabaw ang premium innovation pagkatapos ng mga nakakahimok na sitwasyon. Walang putol na recaptiualize ang matataas na pamantayan sa human capital gamit ang mga nangungunang manufactured na produkto. Katangi-tanging syndicate ang mga schema na sumusunod sa mga pamantayan bago ang matatag na vortals. Natatanging recaptiualize ang paggamit ng pagiging handa sa web kumpara sa out-of-the-box na impormasyon.

    Mahusay na yakapin ang naka-customize na pagiging handa sa web kaysa sa mga prosesong nakadirekta sa customer. Mapilit na palaguin ang mga cross-platform na imperative vis-a-vis proactive na teknolohiya. Maginhawang bigyan ng kapangyarihan ang mga multidisciplinary meta-service na walang mga interface sa buong enterprise.

    Maginhawang i-streamline ang mapagkumpitensyang madiskarteng tema na mga lugar na may nakatutok na mga e-market. Phosfluorescently syndicate ang world-class na mga komunidad vis-a-vis value-added market. Naaangkop na muling likhain ang mga holistic na serbisyo bago ang matatag na e-service.



    Napupunta dito ang abiso sa copyright

    Hakbang 2 Ngayon ay magsusulat tayo pinakasimpleng CSS

    , upang ilagay ang mga elemento sa pahina. Dapat mong i-save ang code na ito sa isang style.css file. Ito ay para dito na ang link ay nakasulat sa html file.

    Html, body ( margin: 0; padding: 0; height: 100%; ) body ( background: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serifs; ) #floater ( position: relative; float: left; height: 50%; margin-bottom: -200px; width: 1px; ) #centered ( position: relative; clear: left; height: 400px; width: 80%; max -width: 800px; min-width: 400px; 0 auto border: 4px solid #666; ; ibaba: 0; padding: 20px;

    Bago gawing align ang aming content center, kailangan naming itakda ang taas ng body at html sa 100%. Dahil ang taas ay kinakalkula nang walang panloob at panlabas na padding (padding at margin), itinakda namin ang mga ito (padding) sa 0 upang walang mga scrollbar.

    Ang ibabang margin para sa isang "floater" na elemento ay katumbas ng minus kalahati ng taas ng nilalaman (400px), ibig sabihin -200px ;

    Ang iyong pahina ay dapat na magmukhang ganito: #centered element width 80%. Ginagawa nitong mas makitid ang aming site sa maliliit na screen at mas malawak sa mas malalaking screen. karamihan sa mga site ay mukhang bastos kapag bago malalawak na monitor

    Dahil ang #centered na elemento ay may position:relative set, maaari naming gamitin ang ganap na pagpoposisyon ng mga elemento sa loob nito. Pagkatapos ay itakda ang overflow:auto; para sa elementong #content, para lumabas ang mga scrollbar kung hindi kasya ang content.

    Hakbang 3

    Ang huling bagay na gagawin namin ay magdagdag ng ilang estilo upang gawing mas kaakit-akit ang pahina. Magsimula tayo sa menu.

    #nav ul (list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; kulay ng background: #e8e8e8; margin: 0; border-bottom: 1px solid: right; font-weight: bold; float: right; margin: 0 2px 0 5px; f8f8f8; border-bottom-color : #777; ) #nav li a:hover::after ( margin: 0 0 0 7px; color: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )

    Ang unang bagay na ginawa namin upang gawing mas maganda ang menu ay alisin ang mga bullet sa pamamagitan ng pagtatakda ng list-style:none attribute, at itakda din ang padding at padding, dahil malaki ang pagkakaiba ng mga ito bilang default sa iba't ibang browser.

    Pansinin na pagkatapos ay tinukoy namin na ang mga link ay dapat i-render bilang mga elemento ng block. Ngayon, kapag ipinakita, ang mga ito ay nakaunat sa buong lapad ng elemento kung saan sila matatagpuan.

    Iba pa kawili-wiling bagay, na ginamit namin para sa menu ay ang pseudo-classes:before and:after . Pinapayagan ka nilang magdagdag ng isang bagay bago at pagkatapos ng isang elemento. Ito magandang paraan magdagdag ng mga icon o simbolo tulad ng isang arrow sa dulo ng bawat link. Hindi gumagana ang trick na ito sa Internet Explorer 7 at sa ibaba.

    Hakbang 4

    At ang huling ngunit hindi bababa sa, magdaragdag kami ng ilang mga turnilyo sa aming disenyo para sa higit pang kagandahan.

    #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( font-family: Helvetica, Arial, sans- serif; font-weight: normal; color: #666; ) h1 ( color: #f93; border-bottom: 1px solid #ddd; letter-spacing: -0.05em; font-weight: bold; margin-top: 0; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0.7em; color: #f03; ) #logo ( font-size: 2em; text-align: center; color: #999; ) #logo malakas ( font-weight: normal; ) #logo span ( display: block; font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 (line-height: 1.6em; ) a ( kulay: #f03; )

    Sa mga istilong ito, nagtakda kami ng mga bilugan na sulok para sa #centered na elemento. Sa CSS3, ito ay gagawin ng border-radius property. Hindi pa ito ipinapatupad sa ilang browser, maliban sa paggamit ng -moz at -webkit prefix para sa Mozilla Firefox at Safari/Webkit.

    Pagkakatugma

    Tulad ng malamang na nahulaan mo na, ang pangunahing pinagmumulan ng mga problema sa compatibility ay ang Internet Explorer:

    • Ang elementong #floater ay dapat may hanay ng lapad
    • Ang IE 6 ay may dagdag na padding sa paligid ng mga menu

    235882 view

    Kapag gumagawa ng mga div block, malamang na nakatagpo ka ng mga sitwasyon kung saan kailangan mong igitna ang iyong div nang pahalang at patayo gamit ang purong CSS. Halimbawa, kapag gumagawa ng mga pop-up gamit ang . Mayroong ilang mga paraan upang ipatupad ang pagsentro, at sa artikulong ito ibabahagi ko ang aking mga paborito at pinakamadaling paraan, gamit ang CSS o jQuery.

    Una, ang mga pangunahing kaalaman:

    Pahalang na pagsentro sa CSS

    Ito ay madaling gawin, ginagamit namin margin para sa ating div harangan.

    ClassName( margin:0 auto; lapad:200px; taas:200px; )

    Para sa pagsentro block div pahalang lamang, kailangan mong tukuyin ang lapad ng bloke (lapad), gamitin ang pag-aari sasakyan para sa mga margin kaliwa't kanan. Ang pamamaraang ito ay gagana para sa lahat ng mga elemento ng block (div, p, h1, at iba pa...). Upang ilapat ang pahalang na pagsentro sa mga inline na elemento (mga link, mga larawan...), kailangan mong ilapat ang parameter display:harangan;

    Pahalang at patayong pagsentro sa CSS

    Ang pagsentro ng isang div block nang pahalang at patayo sa parehong oras ay medyo nakakalito. Kailangan mong malaman ang mga sukat ng div block nang maaga.

    ClassName( width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; )

    Sa pamamagitan ng paggamit ganap Sa pamamagitan ng pagpoposisyon ng isang bloke, maaari nating alisin ito sa mga nakapaligid na elemento at matukoy ang posisyon nito kaugnay sa laki ng window ng browser. Ilipat ang div block sa 50% sa kaliwa at tuktok ng bintana. Ang kaliwang sulok sa itaas ng block ay nasa gitna na ng browser window. Ang natitira na lang ay i-install ang div block sa gitna ng page sa pamamagitan ng paglipat nito sa kalahati ng lapad nito umalis at kalahati ng taas nito pataas. Hooray! Ang resulta ay mahusay na pagsentro ng block sa puro css code.

    Pahalang at patayong pagsentro sa jQuery

    Gaya ng nabanggit kanina - pamamaraan ng CSS gumagana lamang ang pagsentro sa mga nakapirming dimensyon. Kung hindi tinukoy ang mga sukat, darating ang tulong paraan ng jQuery:

    $(window).resize(function())( $(".className").css(( position:"absolute", left: ($(window).width() - $(".className").outerWidth ( ))/2, itaas: ($(window).height() - $(".className").outerHeight())/2 )); // Para magpatakbo ng function kapag na-load ang window: $(window).resize();

    Ang pagpapatakbo ng pamamaraang ito ay upang patakbuhin ang resize() function gamit ang linya $(window).resize(). Gumagana ang function na ito tuwing binabago ang window ng browser. Ginagamit namin outerWidth() At outerHeight(), dahil sa kabaligtaran lapad() At taas(), kasama sa mga ito ang padding at kapal ng hangganan sa laki na kanilang ibinalik. Huling linya, magsisimula sa proseso ng pagsentro sa div block kapag nag-load ang page.

    Ang bentahe ng paggamit ng paraang ito ay maaaring hindi mo alam kung anong sukat ang div. Ang pangunahing disbentaha ay gumagana lamang ito kapag pinagana ang JavaScript. Samakatuwid, ang pamamaraang ito ay katanggap-tanggap para sa mga multifunctional na interface tulad ng VKontakte, Facebook, atbp.

    Gaya ng dati, huwag mag-atubiling imungkahi ang iyong paboritong paraan para sa pagsentro ng mga bloke sa pamamagitan ng pagkomento.

    Ang CSS vertical-align property ay responsable para sa vertical alignment ng text at mga larawan sa page. Mahalagang tampok ay gumagana lamang ito sa mga elemento ng talahanayan, inline at inline-block na mga elemento. Sinusuportahan ng lahat ng modernong browser.

    Syntax CSS vertical-align

    ... vertical-align : value ; ...
    • baseline - pagkakahanay sa baseline ng ninuno (o simpleng mas mababang hangganan ng magulang)
    • ibaba - ihanay sa ilalim ng linya (o ang elementong nasa ibaba ng lahat)
    • gitna - ihanay ang midpoint ng elemento sa baseline ng magulang at kalahati ng taas ng magulang
    • sub - ang display ay nangyayari sa ibaba ng linya (mukhang isang subscript)
    • super - ang pagpapakita ay nangyayari sa itaas ng linya (bilang isang superscript)
    • text-bottom - ihanay ang ilalim na hangganan ng elemento sa ilalim na gilid ng linya
    • text-top - ihanay ang tuktok na hangganan ng elemento sa tuktok na gilid ng linya
    • itaas - ihanay ang tuktok na gilid ng elemento sa tuktok ng pinakamataas na elemento sa linya
    • magmana - nagmamana ng halaga ng magulang
    • halaga - ipinahiwatig sa mga pixel. Positibong numero nagbabago paitaas kaugnay ng baseline. Negative pababa
    • interes - ipinahiwatig sa mga porsyento. Ang isang positibong numero ay lumilipat paitaas na may kaugnayan sa baseline. Negative pababa

    Default na vertical-align na halaga:

    • baseline (para sa mga inline na elemento)
    • gitna (para sa mga cell ng talahanayan)

    Vertical alignment sa mga talahanayan

    Ang pinakakaraniwang paggamit ng vertical-align ay sa mga cell ng talahanayan. Sa tag

    gamitin ang valign attribute.

    CSS valign syntax para sa mga talahanayan

    Saan maaaring kunin ng halaga ang mga sumusunod na halaga:

    • baseline - pagkakahanay sa unang baseline string ng teksto
    • ibaba - ihanay sa ilalim na gilid ng cell ng talahanayan
    • gitna - pagkakahanay sa gitna ng cell
    • tuktok - align sa tuktok na gilid ng cell

    Halimbawa:

    o
    I-align sa itaas
    Pag-align sa gitna
    Pagkahanay sa ibaba
    I-align sa itaas
    Pag-align sa gitna
    Pagkahanay sa ibaba

    Mga halimbawa na may mga vertical alignment

    Halimbawa 1. Mga value ng vertical-align: baseline, ibaba, itaas, sub


    Текст с выравниванием vert_align_baseline
    Текст с выравниванием vert_align_bottom
    Текст с выравниванием vert_align_top
    Текст с выравниванием vert_align_sub

    Пример 2. Значения vertical-align: абсолютные значения и проценты

    Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.





    Преобразуется на странице в следующее:

    Исходная строка. Текст с выравниванием на 10 пикселей вверх
    Исходная строка. Текст с выравниванием на 5 пикселей вниз
    Исходная строка. Текст с выравниванием на 50% вверх
    Исходная строка. Текст с выравниванием на 30% вниз

    Примечание

    Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).

    Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

    object.style.verticalAlign ="VALUE "

    Постановка задачи: необходимо задать вертикальное выравнивание для inline или inline-block элементов внутри блочного элемента.

    Подходы к решению задачи. Существуют различные способы, рассмотрим основные из них:

    1. Представить блочный элемент как ячейку таблицы (display: table-cell ).
    2. IE6-7: метод expression.
    3. Приравнивание межстрочного интервала (свойство line-height ) и высоты блока (для однострочных элементов).
    4. Позиционирование при помощи внешнего блока (position:absolute ).

    Ну а подведя итоги, рассмотрим еще один метод:

    5. Выравнивание с помощью свойства vertical-align.

    display: table-cell

    Для вертикального выравнивания применяется свойство display: table-cell родительскому блоку, которое заставляет элемент эмулировать ячейку таблицы. Ему же задается высота и vertical-align: middle :

    Вертикальное выравнивание. Способ display: table-cell



    Mga kalamangan:

    • pagiging simple;
    • Inihanay ang parehong isa at ilang linya.

    Cons:

    • Hindi gumagana sa IE7 at sa ibaba;
    • Kung walang karagdagang mga istraktura, mahirap manipulahin pahalang na posisyon panlabas na yunit;
    • Hindi lahat ay nagugustuhan ang katotohanan ng paggamit ng display: table-cell .

    IE6-7: paraan ng pagpapahayag

    kasi ang nakaraang pamamaraan ay hindi gumagana sa IE6-7, pagkatapos ay kailangan nating ayusin ang problemang ito.

    Expression - maiikling piraso ng JS code na inilagay sa isang style file, na pinaandar nang isang beses at gagana lamang sa IE. Di-wasto ang expression. Sa nakaraang halimbawa, idagdag ang sumusunod na piraso ng code sa mga style file para sa IE6 at 7:

    Wrapper p ( z-index: expression(runtimeStyle.zIndex = 1, ito == ((200/2)-parseInt(offsetHeight)/2)< 0 ? style.marginTop="0" : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +"px"); }

    Walang saysay na isaalang-alang ang mga pakinabang at disadvantages dito, dahil... walang mga pakinabang, maliban na ang pamamaraang ito ay umaakma sa una sa IE6-7, ngunit dahil... Ang mga browser na ito ay luma na, maaari mong pumikit sa kanila.

    taas ng linya

    Upang ihanay ang isang linya ng teksto na maaari mong gamitin parehong mga halaga taas at line spacing para sa parent block. Angkop para sa mga pindutan, mga item sa menu, atbp.

    Patayong nakahanay na string


    Mga kalamangan:

    • pagiging simple;
    • Cross-browser compatibility.

    Cons:

    • Angkop para sa mga single-line na elemento lamang;
    • Pinapayagan lamang ang pag-align sa gitna.

    posisyon at negatibong margin up

    Maaaring i-align nang patayo ang isang elemento sa pamamagitan ng pagbibigay dito ng isang nakapirming taas at paglalapat ng posisyon: absolute at isang negatibong margin-top na katumbas ng kalahati ng taas ng elementong ini-align. Ang parent block ay dapat bigyan ng posisyon: relative :

    Vertical alignment. Paraan ng taas ng linya

    Naka-align ako patayo



    Mga kalamangan:

    • Pagiging tugma sa cross-browser;
    • Maaari mong ihanay ang mga elemento alinman sa gitna o sa anumang iba pang posisyon.

    Cons:

    • Labour intensive kapag malalaking dami elemento;
    • Mahirap pangasiwaan;
    • Kinakailangang malaman at itala ang taas ng elemento;
    • Sa ilang mga browser, ang ganap na pagpoposisyon ay maaaring magdulot ng pagkasira ng pagganap.

    Buod ng mga tanyag na pamamaraan

    Tulad ng nakikita mo, ang mga pamamaraan na ito ay hindi pangkalahatan - bawat isa sa kanila ay may, kahit na maliit, mga disadvantages. Ang display: table-cell method ay lumalabas na ang pinaka-unibersal, ngunit hindi ko ito nagustuhan, at bukod pa, hindi namin tinalikuran ang suporta para sa IE6-7 sa napakatagal na panahon. Samakatuwid, nagkaroon ng pangangailangan na magtrabaho sa isang bagay na mas unibersal. Tingnan natin ang Alignment gamit ang vertical-align .

    Pag-align gamit ang vertical-align

    Tulad ng alam mo, ang vertical-align na pag-aari ay hindi gumagana para sa mga elemento ng block, kaya ang paglalapat ng pag-aari na ito sa kanila ay walang silbi. Gayunpaman, mahusay na gumagana ang property na ito para sa mga inline at inline-block na elemento. Kung susubukan naming ilapat ang property na ito sa mga elemento sa loob ng isang block element, makukuha namin ang sumusunod na larawan:

    Elemento 1 Elemento 2 Elemento 3 Elemento 4 Elemento 5


    Tulad ng nakikita mo, ang mga elemento ay nakahanay na may kaugnayan sa linya, at hindi ang buong bloke, na hindi angkop sa amin. Subukan nating magdagdag ng elemento sa loob ng block (dahil hindi maitakda ang taas para sa isang inline na elemento, dapat inline-block ang elemento ) na may taas na katumbas ng taas ng panlabas na bloke. Idagdag (ipinapakita sa larawan sa ibaba na may kulay abong linya) at nakukuha natin:


    Vertical alignment. vertical-align na paraan

    Elemento 1 Elemento 2 Elemento 3 Elemento 4 Elemento 5


    Itakda para sa lahat ng elemento vertical-align:gitna .


    Buweno, nakasentro kami sa isang linya sa ganitong paraan. Ngunit paano kung kailangan mo ng ilang linya? At walang mga problema dito. Kailangan mo lamang itakda ang display:inline-block para sa mga elemento ng teksto:


    Vertical alignment. vertical-align na paraan

    Elemento 1 Elemento na may dalawa
    mga linya ng teksto
    Elemento 3 Elemento 4 Elemento
    kasama ang tatlo
    mga linya ng teksto


    Kung hindi mahalaga sa amin ang pagiging tugma sa mga mas lumang bersyon ng IE, kung gayon ang elemento maaari nating alisin ito at palitan ang mga istilo nito ng:

    Wrapper:after ( content:""; display:inline-block; height:100%; width:0px; overflow:hidden; vertical-align:middle; )

    Ilang puntos na dapat tandaan:

    • Ang mga elementong naka-align ay hindi maaaring mailapat sa kanila ang float property.
    • Palaging may distansya sa pagitan ng mga katabing inline-block na elemento, kaya kung kailangan nilang pindutin nang magkasama, pagkatapos ay para sa panlabas na bloke kailangan mong itakda ang laki ng font: 0px;
    • at ibalik ang mga elemento mismo sa pamamagitan ng pagtatakda ng nais na halaga.

    Mga kalamangan:

    Sa ganitong paraan, maaari mong itakda ang parehong mga halaga (itaas, ibaba o gitna) at iba't ibang mga halaga para sa mga panloob na elemento.
    Ang pangangailangan para sa buwanang pagbabayad para sa pag-promote ng search engine ng site. Pangunahing trabaho sa site para sa epektibong promosyon at gastos ng trabaho

    Gusto kong magbayad para sa pag-promote ng aking site nang isang beses at palaging mataas sa mga resulta ng paghahanap para sa mga mapagkumpitensyang query, posible ba ito?
    Ilang tanong tungkol sa pag-promote ng website batay sa trapiko. Mga nuances ng taripa, pagkalkula ng halaga ng trabaho, bayad sa subscription.

    Mga Madalas Itanong sa Web Analytics (FAQ)
    Mga tanong na madalas itanong ng mga customer ng mga serbisyo sa web analytics at ang pagbibigay ng serbisyo mismo. Ano ang web analytics? Bakit kailangan ng proyekto ng web analytics? Bakit kailangan mong tukuyin ang mga KPI at ano ang mga ito? At iba pa.

    Anong gawain ang HINDI kasama sa SEO kung na-promote sa Pixel Plus?
    Kasama sa promosyon ng search engine ang isang malaking listahan ng mga gawaing kinakailangan upang makuha pinakamataas na resulta... Ngunit anong uri ng trabaho ang hindi kasama sa pagbabayad ng SEO?

    Availability ng mga teksto para sa pag-promote ng website, pag-optimize ng mga teksto ng SEO para sa mga query sa paghahanap
    Bakit kailangan mo ng text sa isang website? Walang nagbabasa nito!

    Oras na para i-promote at gumawa ng mga pagbabago sa mga resulta ng pag-promote ng website, ang bilis ng pagtugon ng Yandex sa mga pagbabago sa site
    Nagbayad ako para sa mga serbisyo sa pag-promote ng website sa loob ng isang buwan. 10 araw na ang lumipas at ang iyong posisyon sa Yandex ay hindi bumuti, nagtatrabaho ka ba doon o hindi?