Wat tekst

display-methode als een tabel, daarna kunnen we de eigenschap vertical-align daarin gebruiken (die in verschillende elementen anders werkt).

#wrapper( weergave: tabel; ) #cell( weergave: tabelcel; verticaal uitlijnen: midden; )

Pluspunten

• Inhoud kan dynamisch van hoogte veranderen (hoogte is niet gedefinieerd in CSS).
• Inhoud wordt niet afgesneden als er niet genoeg ruimte voor is.

Nadelen

• Werkt niet in IE 7 of lager
• Veel geneste tags

2e methode

Deze methode maakt gebruik van absolute positionering van de div, waarbij de top is ingesteld op 50% en de marge-top minus de helft van de inhoudshoogte. Dit houdt in dat het object een vaste hoogte moet hebben, die is gedefinieerd in de CSS-stijlen.

Omdat de hoogte vaststaat, kunt u overflow:auto; voor een div die inhoud bevat, dus als de inhoud niet past, verschijnen er schuifbalken.

#content ( positie: absoluut; boven: 50%; hoogte: 240px; marge-boven: -120px; /* minus de helft van de hoogte */ )

Pluspunten

• Werkt in alle browsers.
• Er is geen onnodig nestelen.

Nadelen

• Als er niet genoeg ruimte is, verdwijnt de inhoud (de div bevindt zich bijvoorbeeld in de body en de gebruiker heeft de vensters kleiner gemaakt, in welk geval de schuifbalken niet verschijnen.

3e methode

Bij deze methode omsluiten we de inhoudsdiv met een andere div. Laten we de hoogte instellen op 50% (hoogte: 50%;), en de ondermarge op de helft van de hoogte (margin-bottom:-contentheight;). De inhoud zal zweven en gecentreerd zijn.

#floater( float: links; hoogte: 50%; marge-onder: -120px; ) #content( clear: beide; hoogte: 240px; positie: relatief; )

Pluspunten

• Werkt in alle browsers.
• Als er niet genoeg ruimte is (bijvoorbeeld als het venster wordt verkleind), wordt de inhoud niet bijgesneden en verschijnen er schuifbalken.

Nadelen

• Ik kan maar één ding bedenken: dat er een extra leeg element wordt gebruikt.

4e methode.

Deze methode gebruikt de eigenschap position:absolute; voor div met vaste maten(breedte en hoogte). Vervolgens stellen we de coördinaten top:0 in; bodem:0; , maar omdat het een vaste hoogte heeft, kan het niet uitrekken en is het uitgelijnd met het midden. Dit lijkt sterk op de bekende methode voor horizontale middenuitlijning blok-element vaste breedte (marge: 0 auto;).

#content( positie: absoluut; boven: 0; onder: 0; links: 0; rechts: 0; marge: auto; hoogte: 240px; breedte: 70%; )

Pluspunten

• Heel eenvoudig.

Nadelen

• Werkt niet binnen Internet Explorer
• De inhoud wordt zonder schuifbalken afgesneden als er niet voldoende ruimte in de container is.

5e methode

Met deze methode kunt u één regel tekst centreren. Stel gewoon de teksthoogte in (lijnhoogte) gelijke hoogte onderdeel (hoogte). Hierna wordt de lijn in het midden weergegeven.

#content( hoogte: 100px; lijnhoogte: 100px; )

Pluspunten

• Werkt in alle browsers.
• Knipt de tekst niet af als deze niet past.

Nadelen

• Werkt alleen met tekst (werkt niet met blokelementen).
• Als er meer dan één regel tekst is, ziet het er erg slecht uit.

Deze methode is erg handig voor kleine elementen, zoals het centreren van tekst in een knop of tekstveld.

Nu je weet hoe je verticale middenuitlijning kunt bereiken, gaan we een eenvoudige website maken die er uiteindelijk zo uit zal zien:

Stap 1

Het is altijd goed om te beginnen met semantische opmaak. Onze pagina zal als volgt opgebouwd zijn:

• #floater (om de inhoud te centreren)
• #gecentreerd (centraal element)
  • #kant
    • #logo
    • #nav (lijst
    • #inhoud
  • #bottom (voor auteursrechten en zo)

  Laten we de volgende HTML-opmaak schrijven:

  Een bedrijf

  • Thuis
  • Producten
  • Bloggen
  • Contact
  • Over

  Paginatitel

  Geef outsourcing met toegevoegde waarde op holistische wijze opnieuw vorm na procesgerichte samenwerking en het delen van ideeën.

  Vereenvoudig impactvolle nichemarkten op energieke wijze via ingeschakelde imperatieven. Holistisch overheersen premium innovatie na overtuigende scenario's. Herwaardeer naadloos de hoge normen op het gebied van menselijk kapitaal met toonaangevende vervaardigde producten. Syndiceer schema's die aan standaarden voldoen op onderscheidende wijze vóór robuuste vortals. Herwaardeer op unieke wijze de webgereedheid ten opzichte van kant-en-klare informatie.

  Omarm op efficiënte wijze aangepaste webgereedheid in plaats van klantgerichte processen. Stimuleer op assertieve wijze cross-platform imperatieven ten opzichte van proactieve technologieën. Maak op een handige manier multidisciplinaire metaservices mogelijk zonder bedrijfsbrede interfaces.

  Stroomlijn concurrerende strategische themagebieden op een handige manier met gerichte e-markten. Fosfluorescentie brengt gemeenschappen van wereldklasse samen ten opzichte van markten met toegevoegde waarde. Vind holistische diensten op de juiste manier opnieuw uit vóór robuuste e-diensten.

  
  
  

  Copyrightvermelding vindt u hier

  Stap 2 Nu zullen we schrijven eenvoudigste CSS

  , om elementen op de pagina te plaatsen. U moet deze code opslaan in een style.css-bestand. Hiernaar wordt de link in het HTML-bestand geschreven.

  Html, body ( marge: 0; opvulling: 0; hoogte: 100%; ) body ( achtergrond: url("page_bg.jpg") 50% 50% no-repeat #FC3; lettertypefamilie: Georgia, Times, serifs; ) #floater ( positie: relatief; zwevend: links; hoogte: 50%; marge-onder: -200px; breedte: 1px; ) #centered ( positie: relatief; helder: links; hoogte: 400px; breedte: 80%; max -breedte: 800px; minimale breedte: 400px; marge: 0 auto; rand: 4px effen #666 ) #bottom (positie: absoluut; onder: 0; rechts: 0; ) #nav (positie: absoluut; links: 0 ; onder: 0; opvulling: 20px; onder: 0; overloop: automatisch;

  Voordat we ons inhoudscentrum uitlijnen, moeten we de hoogte van de body en html instellen op 100%. Omdat de hoogte wordt berekend zonder interne en externe opvulling (opvulling en marge), zetten we deze (opvulling) op 0 zodat er geen schuifbalken zijn.

  De ondermarge voor een "floater"-element is gelijk aan minus de helft van de inhoudshoogte (400px), namelijk -200px;

  

  Uw pagina zou er nu ongeveer zo uit moeten zien: #gecentreerde elementbreedte 80%. Dit maakt onze site smaller op kleine schermen en breder op grotere schermen. de meeste sites zien er onfatsoenlijk uit als ze nieuw zijn brede monitoren

  Omdat voor het element #centered position:relative is ingesteld, kunnen we de absolute positionering van de elementen erin gebruiken. Stel vervolgens overflow:auto; voor het element #content zodat er schuifbalken verschijnen als de inhoud niet past.

  Stap 3

  Het laatste dat we doen is wat styling toevoegen om de pagina er wat aantrekkelijker uit te laten zien. Laten we beginnen met het menu.

  #nav ul ( lijststijl: geen; opvulling: 0; marge: 20px 0 0 0; tekstinspringing: 0; ) #nav li ( opvulling: 0; marge: 3px; ) #nav li a (weergave: blok; achtergrondkleur: #e8e8e8; marge: 0; rand-onder: 1px effen: rechts; lettertype-dikte: vet; zwevend: rechts; marge: 0 2px 0 5px; f8f8f8; rand-onder-kleur : #777; ) #nav li a:hover::after ( marge: 0 0 0 7px; kleur: #f93; ) #nav li a:active ( opvulling: 8px 7px 6px 7px; )

  Het eerste dat we deden om het menu er beter uit te laten zien, was de opsommingstekens verwijderen door het list-style:none attribuut in te stellen, en ook de opvulling en opvulling in te stellen, aangezien deze standaard sterk variëren in verschillende browsers.

  Merk op dat we vervolgens hebben gespecificeerd dat de links als blokelementen moeten worden weergegeven. Wanneer ze nu worden weergegeven, worden ze uitgerekt over de gehele breedte van het element waarin ze zich bevinden.

  Ander interessant ding, die we voor het menu hebben gebruikt, zijn de pseudo-klassen:before en:after . Hiermee kunt u iets voor en na een element toevoegen. Dit goede manier voeg pictogrammen of symbolen toe, zoals een pijl, aan het einde van elke link. Deze truc werkt niet in Internet Explorer 7 en lager.

  

  Stap 4

  En last but not least voegen we wat schroeven toe aan ons ontwerp voor nog meer schoonheid.

  #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( lettertypefamilie: Helvetica, Arial, sans- serif; lettertype-dikte: normaal; kleur: #666; ) h1 (kleur: #f93; rand-onder: 1px effen #ddd; letter-afstand: -0.05em; lettertype-gewicht: vet; marge-boven: 0; opvulling-top: 0; ) #bottom (opvulling: 10px; lettergrootte: 0.7em; kleur: #f03; ) #logo ( lettergrootte: 2em; tekstuitlijning: midden; kleur: #999; ) #logo strong ( lettertypegewicht: normaal; ) #logo span (weergave: blok; lettertypegrootte: 4em; regelhoogte: 0,7em; kleur: #666; ) p, h2, h3 ( regelhoogte: 1,6em; ) een ( kleur: #f03; )

  In deze stijlen stellen we afgeronde hoeken in voor het #centered element. In CSS3 wordt dit gedaan door de eigenschap border-radius. In sommige browsers is dit nog niet geïmplementeerd, behalve bij het gebruik van de voorvoegsels -moz en -webkit voor Mozilla Firefox en Safari/Webkit.

  

  Verenigbaarheid

  Zoals je waarschijnlijk al geraden had, is Internet Explorer de belangrijkste bron van compatibiliteitsproblemen:

  • Voor het element #floater moet een breedte zijn ingesteld
  • IE 6 heeft extra opvulling rond menu's

  235882 keer bekeken

  Bij het maken van div-blokken bent u waarschijnlijk situaties tegengekomen waarin u uw div horizontaal en verticaal moet centreren met behulp van pure CSS. Als u bijvoorbeeld pop-ups maakt met . Er zijn verschillende manieren om centrering te implementeren, en in dit artikel deel ik mijn favoriete en gemakkelijkste manieren, met behulp van CSS of jQuery.

  Eerst de basis:

  Horizontaal centreren in CSS

  Dit is gemakkelijk te doen, wij gebruiken marge voor onze div blok.

  Klassenaam( marge:0 auto; breedte:200px; hoogte:200px; )

  Voor centreren blok div alleen horizontaal, u moet de blokbreedte (breedte) definiëren, gebruik de eigenschap auto voor marges links en rechts. Deze methode werkt voor alle blokelementen (div, p, h1, enzovoort...). Om horizontale centrering toe te passen op inline-elementen (links, afbeeldingen...), moet u de parameter toepassen weergave:blok;

  Horizontale en verticale centrering in CSS

  Het tegelijkertijd horizontaal en verticaal centreren van een div-blok is iets lastiger. U moet de afmetingen van het div-blok van tevoren weten.

  ClassName( breedte:300px; hoogte:200px; positie:absoluut; links:50%; boven:50%; marge:-100px 0 0 -150px; )

  Door te gebruiken absoluut Door een blok te positioneren, kunnen we het losmaken van omringende elementen en de positie ervan bepalen in relatie tot de grootte van het browservenster. Verplaats het div-blok naar 50% links en bovenaan het venster. De linkerbovenhoek van het blok bevindt zich nu in het midden van het browservenster. Het enige dat overblijft is het div-blok in het midden van de pagina te installeren door het naar te verplaatsen de helft van zijn breedte links en de helft van zijn hoogte omhoog. Hoera! Het resultaat was een uitstekende centrering van het blok pure css code.

  Horizontaal en verticaal centreren met jQuery

  Zoals eerder vermeld – CSS-methode centreren werkt alleen met vaste afmetingen. Als de afmetingen niet zijn opgegeven, hulp zal komen jQuery-methode:

  $(window).resize(function())( $(".className").css(( positie:"absoluut", links: ($(window).width() - $(".className").outerWidth ( ))/2, bovenaan: ($(window).height() - $(".className").outerHeight())/2 )); // Om een ​​functie uit te voeren wanneer het venster geladen is: $(window).resize();

  De werking van deze methode is om de functie resize() uit te voeren met behulp van de regel $(venster).resize(). Deze functie werkt wanneer het formaat van het browservenster wordt gewijzigd. Wij gebruiken buitensteBreedte() En buitensteHoogte(), omdat in contrast breedte() En hoogte(), ze bevatten opvulling en randdikte in de maat die ze retourneren. Laatste regel, start het proces van het centreren van het div-blok wanneer de pagina wordt geladen.

  Het voordeel van het gebruik van deze methode is dat u mogelijk niet weet hoe groot de div is. Het grootste nadeel is dat het alleen werkt als JavaScript is ingeschakeld. Daarom is deze methode acceptabel voor multifunctionele interfaces zoals VKontakte, Facebook, enz.

  Zoals altijd kunt u uw favoriete methode voor het centreren van blokken voorstellen door commentaar te geven.

  De CSS-eigenschap verticaal uitlijnen is verantwoordelijk voor de verticale uitlijning van tekst en afbeeldingen op de pagina. Belangrijk kenmerk is dat het alleen werkt met tabelelementen, inline en inline-blokelementen. Ondersteund door alle moderne browsers.

  Syntaxis CSS verticaal uitlijnen

  ... verticaal uitlijnen: waarde; ...

  • basislijn - uitlijning met de basislijn van de voorouder (of eenvoudigweg de ondergrens van de ouder)
  • onderkant - lijn uit met de onderkant van de regel (of het element dat zich onder alles bevindt)
  • midden - lijn het middelpunt van het element uit met de basislijn van het bovenliggende element plus de helft van de hoogte van het bovenliggende element
  • sub - weergave vindt plaats onder de regel (ziet eruit als een subscript)
  • super - weergave vindt plaats boven de lijn (als superscript)
  • text-bottom - lijn de onderrand van het element uit met de onderrand van de lijn
  • text-top - lijn de bovenrand van het element uit met de bovenrand van de lijn
  • boven - lijn de bovenrand van het element uit met de bovenkant van het hoogste element op de lijn
  • erven - erft de waarde van de ouder
  • waarde - aangegeven in pixels. Positief getal verschuift naar boven ten opzichte van de basislijn. Negatief naar beneden
  • rente - aangegeven in percentages. Een positief getal verschuift naar boven ten opzichte van de basislijn. Negatief naar beneden

  Standaardwaarde voor verticale uitlijning:

  • basislijn (voor inline-elementen)
  • midden (voor tabelcellen)

  Verticale uitlijning in tabellen

  Het meest voorkomende gebruik van verticaal uitlijnen is in tabelcellen. In het etiket

  gebruik het valign attribuut.

  CSS valign-syntaxis voor tabellen

  Waar waarde de volgende waarden kan aannemen:

  • basislijn - uitlijning met de eerste basislijn tekstreeks
  • onder - uitlijnen met de onderrand van de tabelcel
  • midden - uitlijning met het midden van de cel
  • boven - uitlijnen met de bovenrand van de cel

  Bijvoorbeeld:

  of

  Uitlijnen naar boven

  Uitlijning midden

  Onderste uitlijning

  Uitlijnen naar boven

  Uitlijning midden

  Onderste uitlijning

  Voorbeelden met verticale uitlijningen

  Voorbeeld 1. Waarden verticaal uitlijnen: basislijn, onder, boven, 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 :

  
  
  

  Pluspunten:

  • Eenvoud;
  • Lijnt zowel één als meerdere lijnen uit.

  Nadelen:

  • Werkt niet in IE7 en lager;
  • Zonder aanvullende structuren is het moeilijk te manipuleren horizontale positie externe eenheid;
  • Niet iedereen vindt het leuk om display: table-cell te gebruiken.

  IE6-7: expressiemethode

  Omdat de vorige methode werkt niet in IE6-7, dan moeten we dit probleem oplossen.

  Expressie - korte stukjes JS-code die in een stijlbestand worden geplaatst, één keer worden uitgevoerd en alleen in IE werken. Expressie is ongeldig. Voeg aan het vorige voorbeeld het volgende stukje code toe aan de stijlbestanden voor IE6 en 7:

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

  Het heeft geen zin om hier de voor- en nadelen te overwegen, omdat... er zijn geen voordelen, behalve dat deze methode een aanvulling is op de eerste in IE6-7, maar aangezien... Deze browsers zijn al verouderd, u kunt ze door de vingers zien.

  lijn-hoogte

  Om één regel tekst uit te lijnen, kunt u gebruiken dezelfde waarden hoogte en regelafstand voor het bovenliggende blok. Geschikt voor knoppen, menu-items etc.

  Verticaal uitgelijnde tekenreeks
  
  
  

  Pluspunten:

  • Eenvoud;
  • Compatibiliteit tussen browsers.

  Nadelen:

  • Alleen geschikt voor enkellijnige elementen;
  • Alleen centrale uitlijning mogelijk.

  positie en negatieve marge omhoog

  Een element kan verticaal worden uitgelijnd door het een vaste hoogte te geven en een vaste positie toe te passen: absoluut en een negatieve marge-top gelijk aan de helft van de hoogte van het uit te lijnen element. Het ouderblok moet de positie krijgen: relatief :

  Ik ben verticaal uitgelijnd

  
  
  

  Pluspunten:

  • Compatibiliteit tussen browsers;
  • U kunt elementen in het midden of op een andere positie uitlijnen.

  Nadelen:

  • Arbeidsintensief wanneer grote hoeveelheden elementen;
  • Moeilijk te beheren;
  • Het is noodzakelijk om de hoogte van het element te kennen en vast te leggen;
  • In sommige browsers kan absolute positionering prestatievermindering veroorzaken.

  Samenvatting van populaire methoden

  Zoals u kunt zien, zijn deze methoden niet universeel - elk ervan heeft, zij het kleine, nadelen. De display: table-cell-methode blijkt de meest universele, maar ik heb er nooit van genoten, en bovendien hebben we de ondersteuning voor IE6-7 al heel lang niet opgegeven. Daarom was het nodig om aan iets universeler te werken. Laten we eens kijken naar Uitlijning met behulp van vertical-align .

  Uitlijning met behulp van verticaal uitlijnen

  Zoals u weet werkt de eigenschap verticaal uitlijnen niet voor blokelementen, dus het toepassen van deze eigenschap daarop is nutteloos. Deze eigenschap werkt echter uitstekend voor inline- en inline-blokelementen. Als we deze eigenschap proberen toe te passen op elementen binnen een blokelement, krijgen we het volgende beeld:

  Element 1 Element 2 Element 3 Element 4 Element 5
  
  
  

  Zoals je kunt zien, zijn de elementen uitgelijnd ten opzichte van de lijn, en niet het hele blok, wat niet bij ons past. Laten we dan proberen een element binnen het blok toe te voegen (aangezien de hoogte niet kan worden ingesteld voor een inline-element, moet het element inline-block zijn) met een hoogte die gelijk is aan de hoogte van het buitenste blok. Toevoegen (weergegeven in de onderstaande afbeelding met een grijze lijn) en we krijgen:

  
  

  Element 1 Element 2 Element 3 Element 4 Element 5
  
  
  

  Ingesteld voor alle elementen verticaal uitlijnen: midden .

  
  

  We hebben één lijn op deze manier gecentreerd. Maar wat als u meerdere lijnen nodig heeft? En hier zijn geen problemen. U hoeft alleen display:inline-block in te stellen voor tekstelementen:

  
  

  Element 1 Element met twee
  regels tekst Element 3 Element 4 Element
  met drie
  regels tekst
  
  
  

  Als compatibiliteit met oudere versies van IE voor ons niet belangrijk is, dan is het element we kunnen het verwijderen en de stijlen vervangen door:

  Wrapper:after ( inhoud:""; display:inline-block; hoogte:100%; breedte:0px; overflow:verborgen; verticaal uitlijnen:midden; )

  Een paar punten die het vermelden waard zijn:

  • Op elementen die zijn uitgelijnd, kan de eigenschap float niet worden toegepast.
  • Er is altijd een afstand tussen aangrenzende inline-blokelementen, dus als ze tegen elkaar moeten worden gedrukt, moet je voor het buitenste blok de lettergrootte instellen: 0px;
  • en herstel de elementen zelf door de gewenste waarde in te stellen.

  Pluspunten:
  

  Op deze manier kunt u dezelfde waarden (boven, onder of midden) of verschillende waarden instellen voor interne elementen.
  De noodzaak van maandelijkse betaling voor zoekmachinepromotie van de site. Basiswerk op de site voor effectieve promotie en werkkosten

  Ik wil graag eenmalig betalen voor de promotie van mijn site en altijd hoog in de zoekresultaten staan ​​bij concurrerende zoekopdrachten, kan dit?
  Een aantal vragen over websitepromotie op basis van verkeer. Nuances van tarieven, berekening van de werkkosten, abonnementskosten.

  Veelgestelde vragen over webanalyse (FAQ)
  Vragen die vaak gesteld worden door klanten van webanalysediensten en de levering van de dienst zelf. Wat is webanalyse? Waarom heeft het project webanalyse nodig? Waarom moet u KPI’s definiëren en wat zijn dat? En zo verder.

  Welk werk is NIET inbegrepen in SEO als het gepromoveerd wordt naar Pixel Plus?
  Zoekmachinepromotie omvat een grote lijst met werken die u moet verkrijgen maximale resultaten... Maar welke werkzaamheden zijn niet inbegrepen in de SEO-vergoeding?

  Beschikbaarheid van teksten voor websitepromotie, optimalisatie van SEO-teksten voor zoekopdrachten
  Waarom heb je tekst nodig op een website? Niemand leest het!

  Tijd om de resultaten van websitepromotie te promoten en te wijzigen, reactiesnelheid van Yandex op wijzigingen op de site
  Ik heb een maand lang betaald voor websitepromotiediensten. Er zijn al 10 dagen verstreken en uw positie in Yandex is niet verbeterd, werkt u daar of niet?