Div in het midden van de pagina css. Een DIV-blok centreren met automatische marges. Afstemming met transformatie

Er zijn verschillende fundamenteel verschillende manieren om een ​​object verticaal te centreren met behulp van CSS, maar het kiezen van de juiste kan lastig zijn. We zullen er een aantal bekijken en met de opgedane kennis ook een kleine website maken.

Verticale middenuitlijning is niet eenvoudig te bereiken met behulp van CSS. Er zijn veel manieren en ze werken niet allemaal in alle browsers. Laten we naar 5 kijken verschillende methoden, evenals de voor- en nadelen van elk van hen. Voorbeeld.

1e methode

Deze methode gaat ervan uit dat we een element instellen om als tabel weer te geven, waarna we de eigenschap Vertical-align erop kunnen gebruiken (die bij verschillende elementen anders werkt).

Enkele nuttige informatie die gecentreerd moet zijn.

#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 gebruikt absolute positionering

div, waarvan de bovenkant is ingesteld op 50%, en de bovenmarge (margin-top) is minus de helft van de hoogte van de inhoud. 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.

#wrapper( weergave: tabel; ) #cell( weergave: tabelcel; verticaal uitlijnen: midden; )
  • Inhoud hier #content ( positie: absoluut; boven: 50%; hoogte: 240px; marge-boven: -120px; /* minus de helft van de hoogte */ )
  • Werkt in alle browsers.
Inhoud wordt niet afgesneden als er niet genoeg ruimte voor is.
  • Er is geen onnodig nestelen.
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.

#wrapper( weergave: tabel; ) #cell( weergave: tabelcel; verticaal uitlijnen: midden; )
  • Inhoud hier #content ( positie: absoluut; boven: 50%; hoogte: 240px; marge-boven: -120px; /* minus de helft van de hoogte */ )
  • Als er niet genoeg ruimte is (bijvoorbeeld als het venster wordt verkleind), wordt de inhoud niet bijgesneden en verschijnen er schuifbalken.
Inhoud wordt niet afgesneden als er niet genoeg ruimte voor is.
  • 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 horizontale uitlijning in het centrum blok-element vaste breedte (marge: 0 auto;).

Belangrijke informatie.

#wrapper( weergave: tabel; ) #cell( weergave: tabelcel; verticaal uitlijnen: midden; )
  • #content( positie: absoluut; boven: 0; onder: 0; links: 0; rechts: 0; marge: auto; hoogte: 240px; breedte: 70%; )
Inhoud wordt niet afgesneden als er niet genoeg ruimte voor is. 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. We stellen eenvoudigweg de teksthoogte (lijnhoogte) gelijk aan de elementhoogte (hoogte). Hierna wordt de lijn in het midden weergegeven.

#wrapper( weergave: tabel; ) #cell( weergave: tabelcel; verticaal uitlijnen: midden; )
  • Inhoud hier #content ( positie: absoluut; boven: 50%; hoogte: 240px; marge-boven: -120px; /* minus de helft van de hoogte */ )
  • Een regel tekst #content( height: 100px; line-height: 100px; )
Inhoud wordt niet afgesneden als er niet genoeg ruimte voor is.
  • Knipt de tekst niet af als deze niet past.
  • 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:

    Over

    Paginatitel

    Ga op een holistische manier om met outsourcing met toegevoegde waarde, na procesgerichte samenwerking en het delen van ideeën.

    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 gaan we de eenvoudigste CSS schrijven 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; #content (positie: absoluut; links: 0; boven: 0; onder: 0; overloop: auto; opvulling: 20px;

    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 Degene 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. Dit is nog niet door sommige browsers geïmplementeerd, behalve om de voorvoegsels -moz en -webkit te gebruiken 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

    Als u een website knipt die is gemaakt op html-gebaseerd, dan verschijnt er een bepaalde laag-voor-laag-structuur voor je. Bovendien, met zijn eigen verschijning het zal vergelijkbaar zijn met een laagcake. Als je dat denkt, heb je hoogstwaarschijnlijk al een hele tijd niet meer gegeten. Stil dus eerst je honger, en dan zullen we je vertellen hoe je een div-laag op je site kunt centreren:

    Voordelen van opmaak met behulp van een tag

    Er zijn twee hoofdtypen websitestructuur:

    • Tabelvormig;
    • Blok.

    Zelfs aan het begin van het internet was de tabellarische indeling dominant. De voordelen zijn onder meer de nauwkeurigheid van de gespecificeerde positionering. Maar toch heeft het duidelijke tekortkomingen. De belangrijkste zijn het codevolume en lage snelheid downloads.

    Wanneer u de tabelopmaak gebruikt, wordt de webpagina pas weergegeven volle belasting. Bij het gebruik van div-blokken worden de elementen onmiddellijk weergegeven.

    Behalve hoge snelheid Met de laadblokconstructie van de site kunt u de hoeveelheid html-code meerdere keren verminderen. Onder meer door het gebruik van CSS-klassen.

    Er moet echter een tabellarische indeling worden gebruikt om de weergave van gegevens op de pagina te structureren. Een klassiek voorbeeld van het gebruik ervan is de weergave van tabellen.

    Blokconstructie op basis van tags wordt ook laag voor laag genoemd, en de blokken zelf worden lagen genoemd. Dit komt omdat wanneer bepaalde eigenschapswaarden worden gebruikt, deze op elkaar kunnen worden gestapeld, vergelijkbaar met lagen in Photoshop.

    Positioneringshulpmiddelen

    Bij blokopmaak is het beter om lagen te positioneren met behulp van trapsgewijze stijlbladen. De belangrijkste CSS-eigenschap die verantwoordelijk is voor de lay-out is float.
    Eigenschapsyntaxis:
    zweven: links | juist | geen | erven
    Waar:

    • links – lijn het element uit met de linkerrand van het scherm. De stroming rond de overige elementen vindt plaats aan de rechterkant;
    • rechts – uitlijning aan de rechterkant, stroming rond andere elementen – aan de linkerkant;
    • geen – inpakken is niet toegestaan;
    • erven - erfenis van waarde ouderelement.

    Laten we eens kijken naar een lichtgewicht voorbeeld van het positioneren van div's met behulp van deze eigenschap:

    #left ( breedte: 200px; hoogte: 100px; float: links; achtergrond: rgb(255,51,102); ) #right ( breedte: 200px; hoogte: 100px; float: rechts; achtergrond: rgb(0,255.153); ) Links blok Rechter blok


    Nu zullen we proberen dezelfde eigenschap te gebruiken om de derde div in het midden van de pagina te plaatsen. Maar helaas heeft float geen middenwaarde. En wanneer u een nieuw blok een uitlijningswaarde naar rechts of links geeft, wordt het in de opgegeven richting verschoven. Daarom hoeft u alleen nog maar de float in te stellen: overgelaten aan alle drie de blokken:


    Maar dit is niet het geval de beste optie. Wanneer het venster kleiner wordt gemaakt, worden alle lagen verticaal in één rij uitgelijnd, en wanneer het formaat wordt vergroot, blijven ze aan de linkerrand van het venster plakken. We hebben dus een betere manier nodig om de div te centreren.

    Centrerende lagen

    In het volgende voorbeeld gebruiken we een containerlaag waarin we de overige elementen plaatsen. Dit lost het probleem op van blokken die ten opzichte van elkaar bewegen wanneer de venstergrootte wordt gewijzigd. Het centreren van de container in het midden gebeurt door de marge-eigenschappen op nul te zetten voor de marges vanaf de bovenrand en auto aan de zijkanten (marge: 0 auto):

    #container ( breedte: 600px; marge: 0 auto; ) #left ( breedte: 200px; hoogte: 100px; zwevend: links; achtergrond: rgb(255,51,102); ) #right ( breedte: 200px; hoogte: 100px; zwevend : linker achtergrond: rgb(0,255,153); #center ( breedte: 200px; hoogte: 100px; zwevend: links; achtergrond: rgb(255,0,0); ) Linkerblok Middenblok Rechterblok;


    Hetzelfde voorbeeld laat zien hoe u een div horizontaal kunt centreren. En als u de bovenstaande code enigszins bewerkt, kunt u de blokken verticaal uitlijnen. Om dit te doen, hoeft u alleen maar de lengte van de containerlaag te wijzigen (verkleinen). Dat wil zeggen, na het bewerken zou de CSS-klasse er als volgt uit moeten zien:

    Na de verandering staan ​​alle blokken strikt op een rij in het midden. En hun positie zal niet veranderen, ongeacht de grootte van het browservenster. Zo ziet het verticaal centreren van een div eruit:


    In het volgende voorbeeld hebben we een aantal nieuwe CSS-eigenschappen gebruikt om lagen binnen een container te centreren:

    #container ( breedte: 450px; hoogte: 150px; marge:0 auto; achtergrondkleur:#66CCFF; ) #left ( breedte: 100px; hoogte: 100px; achtergrond: rgb(255,51,102); weergave: inline-block; verticaal uitlijnen: midden; marge-links: 35px; ) #right ( breedte: 100px; hoogte: 100px; achtergrond: rgb(0,255.153); weergave: inline-blok; verticaal uitlijnen: midden; marge-links: 35px; ) #center ( breedte: 100px; hoogte: 100px; achtergrond: rgb(255,0,0); weergave: inline-block; verticaal uitgelijnd: midden; marge-links: 35px; )


    Korte beschrijving van de CSS-eigenschappen en hun waarden die we hebben gebruikt in dit voorbeeld om een ​​div binnen een div te centreren:

    • weergave: inline-block – lijnt een blokelement uit in een lijn en zorgt ervoor dat het rond een ander element loopt;
    • verticaal uitlijnen: midden – lijnt het element in het midden uit ten opzichte van het bovenliggende element;
    • margin-left – stelt de linkermarge in.
    Hoe maak je een link van een laag?

    Hoe vreemd het ook klinkt, dit is mogelijk. Soms kan tijdens de lay-out een div-blok als link nodig zijn verschillende soorten menu. Laten we eens overwegen praktisch voorbeeld implementatie van de linklaag:

    #layer1( breedte: 500px; hoogte: 100px; achtergrond: rgb(51.255.204); rand:groef; ) a ( weergave: blok; tekst uitlijnen: midden; hoogte: 100%; kleur: rgb(255,0,51) ; ) Link naar onze website


    In dit voorbeeld stellen we met behulp van de regelweergave: blok de link in op de waarde van een blokelement. En dus dat de hele hoogte div blok werd een link, stel de hoogte in: 100%.

    Blokelementen verbergen en weergeven

    Blokelementen bieden meer mogelijkheden om de functionaliteit van de interface uit te breiden dan de verouderde tabellarische lay-out. Het komt vaak voor dat het website-ontwerp uniek en herkenbaar is. Maar voor zo'n exclusief moet je betalen met een gebrek aan vrije ruimte.

    Dit is vooral waar startpagina, waarvan de advertentiekosten het hoogst zijn. Daarom ontstaat het probleem waar je een ander moet ‘duwen’ reclamebanner. En hier kun je niet wegkomen door de div uit te lijnen met het midden van de pagina!

    Een meer rationele oplossing is om een ​​blok verborgen te maken. Hier is een eenvoudig voorbeeld van een dergelijke implementatie:

    #layer1( display:block; breedte: 500px; hoogte: 100px; achtergrond: rgb(51.255.204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

    Dit is de magische knop. Als u erop klikt, wordt het verborgen blok verborgen of weergegeven.


    In dit voorbeeld verandert de locatie van de div-blokken op geen enkele manier. Hierbij wordt gebruik gemaakt van een eenvoudige JavaScript-functie die de waarde van de css-weergave-eigenschap verandert nadat op een knop wordt geklikt (onclick-gebeurtenis).

    syntaxis weergeven:
    weergave: blok | online | inline-blok | inline-tabel | lijstitem | geen | inloop | tafel | tabelbijschrift | tabelcel | tabel-kolom-groep | tabelkolom | tabel-voettekst-groep | tabelkopgroep | tabelrij | tabel-rij-groep

    Zoals u kunt zien, kan deze eigenschap vele waarden aannemen. Daarom is het erg handig en kan het worden gebruikt om elementen te positioneren. In een van de voorgaande voorbeelden hebben we een van de waarden ervan (inline-block ) gebruikt om een ​​div binnen een div te centreren.

    We hebben twee waarden gebruikt voor de weergave-eigenschap om de laag te verbergen en weer te geven.

    Goedendag, abonnees en lezers van deze publicatie. Vandaag wil ik in detail treden en je vertellen hoe je tekst in CSS kunt centreren. In een aantal eerdere artikelen heb ik het indirect aangestipt dit onderwerp, dus je hebt enige kennis op dit gebied.

    In deze publicatie zal ik u er echter over vertellen op alle mogelijke manieren uitlijning van objecten, en leg ook uit hoe u in alinea's kunt inspringen en rode lijnen kunt maken. Dus laten we beginnen met het leren van de stof!

    Html en zijn nakomelingen en uitlijnen

    Deze methode wordt bijna nooit gebruikt, omdat deze is vervangen door trapsgewijze stijlbladhulpmiddelen. Het zal u echter geen kwaad doen als u weet dat een dergelijke tag bestaat.

    Wat betreft validatie ( deze termijn wordt gedetailleerd beschreven in het artikel ""), dan veroordeelt de html-specificatie zelf het gebruik< center>, omdat het voor de geldigheid noodzakelijk is om de transitionele DOCTYPE> te gebruiken.

    Dit type laat verboden elementen door.

    CENTRUM

    Deze inhoud wordt gecentreerd.

    Houd er rekening mee dat het attribuut dat we analyseren voor de afbeelding enigszins verschillende betekenissen heeft.

    In het voorbeeld gebruikte ik align=" middle" . Hierdoor werd het beeld zo uitgelijnd dat de zin duidelijk in het midden van het beeld stond.

    Centreerhulpmiddelen in css

    CSS-eigenschappen ontworpen voor blokuitlijning, tekst en grafische inhoud, worden veel vaker gebruikt. Dit komt vooral door het gemak en de flexibiliteit van het implementeren van stijlen.

    Laten we dus beginnen met de eerste eigenschap voor het centreren van tekst: text-align.

    Het werkt op dezelfde manier als align in . Onder de trefwoorden kunt u er één uit de algemene lijst kiezen of de kenmerken van een voorouder erven (erven).

    Ik zou willen opmerken dat je in css3 nog 2 parameters kunt instellen: start - afhankelijk van de regels voor het schrijven van tekst (van rechts naar links of omgekeerd) stelt de uitlijning naar links of rechts in (vergelijkbaar met het werk van links of rechts ) en einde - het tegenovergestelde van begin (bij het schrijven van tekst van links naar rechts werkt het als rechts, bij schrijven van rechts naar links - links).

    tekst-uitlijning div (rand: 5px dubbel rood; opvulling: 0 22px 0 22px; ) #l ( tekst-uitlijning: rechts; ) #s ( tekst-uitlijning: einde; )

    Zin aan de rechterkant

    Zin met einde

    Ik zal je iets vertellen over een klein trucje. Wanneer u uitvullen selecteert laatste regel kan lelijk van onderaf bungelen. Om hem bijvoorbeeld in het midden te plaatsen, kun je de eigenschap text-align-last gebruiken.

    Als u site-inhoud of tabelcellen verticaal wilt uitlijnen, gebruikt u de eigenschap verticaal uitlijnen. Hieronder heb ik de belangrijkste trefwoorden van het element beschreven.

    Trefwoord Doel
    basislijn Specificeert de uitlijning met een voorouderlijn, de basislijn genoemd. Als het voorouderobject niet zo'n lijn heeft, vindt uitlijning plaats langs de onderrand.
    midden Het midden van het gemuteerde object wordt uitgelijnd met de basislijn, waaraan de hoogtevloer van het bovenliggende element wordt toegevoegd.
    onderkant De onderkant van de geselecteerde inhoud past zich aan de onderkant van het onderliggende object aan.
    bovenkant Vergelijkbaar met de onderkant, maar met het bovenste gedeelte van het object.
    super Maakt het karakter superscript.
    sub Maakt het element subscript.
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 BLOEM verticaal uitlijnen

    verticaal uitlijnen div( lettergrootte: 4em; tekst uitlijnen: gecentreerd; tekstversiering: onderstrepen; ) #A(verticaal uitlijnen: boven;) #B(verticaal uitlijnen: midden;) #C(verticaal uitlijnen : super;) #D(verticaal uitlijnen: sub;) BLOEM

    Inkepingen

    En ten slotte komen we bij alinea-inspringingen. IN CSS-taal er wordt een speciale eigenschap gebruikt, genaamd text-indent.

    Met zijn hulp kun je zowel een rode lijn als een uitsteeksel maken (je moet een negatieve waarde opgeven).

    tekst-inspringen #a ( tekst-inspringen: 53px; ) #b ( tekst-inspringen: -43px; ) div ( achtergrond: #FFDAB9; breedte:35%; lettergrootte:29px; marge-links: 30%; opvulling -links: 50px;

    Om een ​​rode lijn te maken hoeft u slechts één parameter te kennen.

    Dit is de eenvoudige eigenschap text-indent.

    Ik prijs degenen die elk voorbeeld in de praktijk hebben geprobeerd. Stuur links naar mijn blog naar je vrienden en vergeet niet je te abonneren. Succes! Tot ziens!

    Met vriendelijke groet, Roman Chueshov

    Lezen: 675 keer

    Vaak is het bij een lay-out nodig om een ​​element horizontaal en/of verticaal te centreren. Daarom besloot ik er een artikel mee te maken op verschillende manieren gecentreerd zodat alles op één plek bij de hand is.

    Horizontale uitlijningsmarge: automatisch

    Horizontale uitlijning wanneer marge helpen gebruikt als de breedte van het gecentreerde element bekend is. Werkt voor blokelementen:

    Elem (marge-links: auto; marge-rechts: auto; breedte: 50%; )

    Als u auto opgeeft voor de rechter- en linkermarge, worden deze gelijk, waardoor het element horizontaal binnen het bovenliggende blok wordt gecentreerd.

    tekst uitlijnen: centreren

    Deze methode is geschikt voor het centreren van tekst binnen een blok. tekst uitlijnen: centreren:

    Uitlijning met tekstuitlijning .wrapper ( tekstuitlijning: centreren; )

    Ik ben gecentreerd uitgelijnd

    positie en negatieve marge over

    Geschikt voor het centreren van blokken met bekende breedte. We geven de positie van het bovenliggende blok: relatief ten opzichte van de positie ten opzichte ervan, de gecentreerde elementpositie: absoluut, links: 50% en een negatieve marge-links waarvan de waarde gelijk is aan de helft van de breedte van het element:

    Uitlijning met behulp van position .wrapper ( position: relatief; ) .wrapper p ( links: 50%; marge: 0 0 0 -100px; position: absoluut; breedte: 200px; )

    Ik ben gecentreerd uitgelijnd

    weergave: inline-block + tekst-uitlijning: gecentreerd

    De methode is geschikt voor het uitlijnen van blokken met een onbekende breedte, maar vereist een wrapper-ouder. U kunt een horizontaal menu bijvoorbeeld op deze manier centreren:

    Uitlijning met display: inline-block + tekst-uitlijning: gecentreerd;

    • .navigation (tekst uitlijnen: centreren; ) .navigation li (weergave: inline-block; )
    • Thuis

    Over de auteur

    Verticale uitlijning lijnhoogte Om één regel tekst uit te lijnen, kunt u gebruiken dezelfde waarden hoogten en regelafstand

    voor het ouderblok. Geschikt voor knoppen, menu-items etc.

    lijnhoogte .wrapper ( hoogte: 100px; lijnhoogte: 100px; )

    Ik ben verticaal uitgelijnd

    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 naar boven gelijk aan de helft van de hoogte van het uit te lijnen element. Het ouderblok moet de positie krijgen: relatief:

    Wrapper ( positie: relatief; ) elem ( hoogte: 200px; marge: -100px 0 0; positie: absoluut; boven: 50%; )

    Op deze manier kunt u met behulp van positionering en negatieve marges een element op de pagina centreren.

    Voor verticale uitlijning wordt de eigenschap display: table-cell op het element toegepast, waardoor het wordt gedwongen een tabelcel te emuleren. We stellen ook de hoogte en verticale uitlijning in: middle . Laten we dit allemaal in een container verpakken met de dislpay: table property; :

    Verticaal uitlijningsweergave: tabelcel .wrapper (weergave: tabel; breedte: 100%; ) .cell (weergave: tabelcel; hoogte: 100px; verticaal uitlijnen: midden; )

    lijnhoogte .wrapper ( hoogte: 100px; lijnhoogte: 100px; )

    Dynamische uitlijning van een element op een pagina

    We hebben gekeken naar manieren om elementen op een pagina uit te lijnen CSS-hulp. Laten we nu eens kijken naar de jQuery-implementatie.

    Laten we jQuery verbinden met de pagina:

    Ik stel voor om te schrijven eenvoudige functie Als u een element op de pagina centreert, noemen we het alignCenter() . Het element zelf fungeert als argument voor de functie:

    Functie alignCenter(elem) ( // code hier )

    In de hoofdtekst van de functie berekenen en wijzen we dynamisch de coördinaten van het paginacentrum toe aan de CSS-eigenschappen links en bovenaan:

    Functie alignCenter(elem) ( elem.css(( links: ($(window).width() - elem.width()) / 2 + "px", boven: ($(window).height() - elem. height()) / 2 + "px" // vergeet niet position: absolute toe te voegen aan het element om coördinaten te activeren )) )

    In de eerste regel van de functie krijgen we de breedte van het document en trekken daarvan de breedte van het element af, in tweeën gedeeld - dit is het horizontale midden van de pagina. De tweede regel doet hetzelfde, alleen met hoogte voor verticale uitlijning.

    De functie is klaar, het enige dat overblijft is om deze te koppelen aan de DOM-gereedheids- en venstergroottegebeurtenissen:

    $(function() ( // roep de centreerfunctie aan wanneer de DOM gereed is alignCenter($(elem)); // roep de functie aan bij het wijzigen van de grootte van het venster $(window).resize(function() ( alignCenter($(elem) )); )) // functie voor centreren van elementen function alignCenter(elem) ( elem.css(( // berekening van de linker- en bovenste coördinaten links: ($(window).width() - elem.width()) / 2 + " px", top: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

    Toepassing van Flexbox

    Nieuwe CSS3-functies, zoals Flexbox, worden langzamerhand gemeengoed. De technologie helpt bij het maken van markeringen zonder gebruik te maken van floats, positionering, enz. Het kan ook worden gebruikt om elementen te centreren. Pas Flexbox bijvoorbeeld toe op het bovenliggende element.wrapper en centreer de inhoud erin:

    Wrapper (weergave: -webkit-box; weergave: -moz-box; weergave: -ms-flexbox; weergave: -webkit-flex; weergave: flex; hoogte: 500px; breedte: 500px; ) .wrapper .content (marge: auto; /* marge: 0 auto; alleen horizontaal */ /* marge: auto 0; alleen verticaal */ ) Lorem ipsum dolor sit amet

    Deze regel centreert het element tegelijkertijd horizontaal en verticaal. De marge werkt nu niet alleen voor horizontale uitlijning, maar ook voor verticale uitlijning. En zonder bekende breedte/hoogte.

    Gerelateerde bronnen Help het project

    Ik denk dat velen van jullie die met lay-out te maken hebben gehad, de noodzaak zijn tegengekomen om elementen verticaal uit te lijnen en de moeilijkheden kennen die optreden bij het uitlijnen van een element op het midden.

    Ja, voor verticale uitlijning is er een speciale eigenschap voor verticale uitlijning in CSS met meerdere waarden. In de praktijk werkt het echter helemaal niet zoals verwacht. Laten we proberen dit uit te zoeken.


    Laten we de volgende benaderingen vergelijken. Uitlijnen met:

    • tafels,
    • inkeping,
    • lijn-hoogte
    • strekken,
    • negatieve marge,
    • transformeren
    • pseudo-element
    • flexbox.
    Beschouw ter illustratie het volgende voorbeeld.

    Er zijn er twee div-element, waarbij de ene in de andere is genest. Laten we ze de overeenkomstige klassen geven - uiterlijk en innerlijk.


    De uitdaging is om het binnenste element uit te lijnen met het midden van het buitenste element.

    Laten we eerst eens kijken naar het geval waarin de afmetingen van de externe en interne blokken bekend zijn. Laten we de regelweergave toevoegen: inline-block aan het binnenste element, en tekstuitlijning: centreren en verticaal uitlijnen: midden aan het buitenste element.

    Houd er rekening mee dat uitlijning alleen van toepassing is op elementen die een inline- of inline-blokweergavemodus hebben.

    Laten we de afmetingen van de blokken instellen, evenals de achtergrondkleuren, zodat we hun randen kunnen zien.

    Buitenste ( breedte: 200px; hoogte: 200px; tekst uitlijnen: midden; verticaal uitlijnen: midden; achtergrondkleur: #ffc; ) .inner ( weergave: inline-blok; breedte: 100px; hoogte: 100px; achtergrondkleur : #fcc )
    Na het toepassen van de stijlen zullen we zien dat het binnenste blok horizontaal is uitgelijnd, maar niet verticaal:
    http://jsfiddle.net/c1bgfffq/

    Waarom gebeurde dit? Het punt is dat de eigenschap Vertical-align de uitlijning van het element zelf beïnvloedt, en niet de inhoud ervan (behalve wanneer deze wordt toegepast op tabelcellen). Daarom de aanvraag van dit pand Naar extern element gaf niets. Bovendien zal het toepassen van deze eigenschap op een binnenste element ook niets opleveren, omdat inline-blokken verticaal zijn uitgelijnd ten opzichte van aangrenzende blokken, en in ons geval hebben we één inline-blok.

    Er zijn verschillende technieken om dit probleem op te lossen. Hieronder zullen we elk van hen nader bekijken.

    Uitlijning met behulp van een tabel De eerste oplossing die in je opkomt is het vervangen van het buitenste blok door een tabel van één cel. In dit geval wordt de uitlijning toegepast op de inhoud van de cel, dat wil zeggen op het binnenste blok.


    http://jsfiddle.net/c1bgfffq/1/

    Duidelijk minpuntje dit besluit– vanuit semantisch oogpunt is het onjuist om tabellen te gebruiken voor uitlijning. Het tweede nadeel is dat je, om een ​​tabel te maken, nog een element moet toevoegen externe eenheid.

    Het eerste minpuntje kan gedeeltelijk worden verwijderd door de tags table en td te vervangen door div en de tabelweergavemodus in CSS in te stellen.


    .outer-wrapper (weergave: tabel; ) .outer (weergave: tabelcel; )
    Het buitenste blok blijft echter nog steeds een tafel met alle gevolgen van dien.

    Uitlijning met behulp van inkepingen Als de hoogten van de binnenste en buitenste blokken bekend zijn, kan de uitlijning worden ingesteld met behulp van de verticale inkepingen van het binnenste blok met behulp van de formule: (H buiten – H binnen) / 2.

    Buitenste ( hoogte: 200px; ) .innerlijke ( hoogte: 100px; marge: 50px 0; )
    http://jsfiddle.net/c1bgfffq/6/

    Het nadeel van de oplossing is dat deze alleen toepasbaar is in beperkt aantal gevallen waarin de hoogten van beide blokken bekend zijn.

    Uitlijnen met regelhoogte Als u weet dat het binnenste blok niet meer dan één regel tekst mag beslaan, kunt u de eigenschap line-height gebruiken en deze gelijkstellen aan de hoogte van het buitenste blok. Omdat de inhoud van het binnenste blok niet doorloopt naar de tweede regel, wordt aanbevolen om ook de witruimte toe te voegen: nowrap en overflow: verborgen regels.

    Buitenste ( hoogte: 200px; lijnhoogte: 200px; ) .inner ( witruimte: norap; overflow: verborgen; )
    http://jsfiddle.net/c1bgfffq/12/

    Ook deze techniek kan ook worden gebruikt voor egalisatie tekst met meerdere regels, als u de lijnhoogtewaarde voor het binnenste blok opnieuw definieert, en ook de weergave toevoegt: inline-block en verticaal uitgelijnd: middelste regels.

    Buitenste ( hoogte: 200px; lijnhoogte: 200px; ) .inner ( lijnhoogte: normaal; weergave: inline-blok; verticaal uitgelijnd: midden; )
    http://jsfiddle.net/c1bgfffq/15/

    Minus deze methode is dat de hoogte van het externe blok bekend moet zijn.

    Uitlijning met behulp van "uitrekken" Deze methode kan worden gebruikt wanneer de hoogte van het externe blok onbekend is, maar de hoogte van het interne blok bekend.

    Om dit te doen heb je nodig:

  • relatieve positionering ten opzichte van het externe blok instellen, en absolute positionering ten opzichte van het interne blok;
  • voeg de regels boven: 0 en onder: 0 toe aan het binnenblok, waardoor het zich uitstrekt tot de gehele hoogte van het buitenblok;
  • stel de verticale opvulling van het binnenste blok in op automatisch.
    • .outer ( positie: relatief; ) .inner ( hoogte: 100px; positie: absoluut; boven: 0; onder: 0; marge: auto 0; )
    http://jsfiddle.net/c1bgfffq/4/

    Het idee achter deze techniek is dat het instellen van een hoogte voor een uitgerekt en absoluut gepositioneerd blok ervoor zorgt dat de browser de verticale opvulling in een gelijke verhouding berekent als deze is ingesteld op auto.

    Uitlijning met behulp van negatieve marge-top Deze methode is algemeen bekend geworden en wordt zeer vaak gebruikt. Net als het vorige wordt het gebruikt als de hoogte van het buitenste blok onbekend is, maar de hoogte van het binnenste blok.

    U moet het externe blok de relatieve positionering geven, en het interne blok de absolute positionering. Vervolgens moet u het binnenblok met de helft van de hoogte van de bovenkant van het buitenblok naar beneden verplaatsen: 50% en het met de helft van de eigen hoogte omhoog brengen marge-boven: -H binnen / 2.

    Buitenste ( positie: relatief; ) .inner ( hoogte: 100px; positie: absoluut; boven: 50%; marge-boven: -50px; )
    http://jsfiddle.net/c1bgfffq/13/

    Het nadeel van deze methode is dat de hoogte van de binnenunit bekend moet zijn.

    Uitlijning met transformatie Deze methode is vergelijkbaar met de vorige, maar kan worden gebruikt als de hoogte van het binnenste blok onbekend is. In dit geval kunt u, in plaats van een negatieve pixelopvulling in te stellen, de eigenschap transform gebruiken en het binnenste blok omhoog verplaatsen met behulp van de functie translationY en een waarde van -50% .

    Buitenste ( positie: relatief; ) .innerlijke ( positie: absoluut; bovenkant: 50%; transformatie: vertalenY(-50%); )
    http://jsfiddle.net/c1bgfffq/9/

    Waarom was het bij de vorige methode niet mogelijk om de waarde als percentage in te stellen? Omdat de procentuele margewaarden worden berekend ten opzichte van het bovenliggende element, zou een waarde van 50% de helft van de hoogte van de buitenste doos zijn, en zouden we de binnenste doos tot de helft van zijn eigen hoogte moeten verhogen. De transform-eigenschap is hier perfect voor.

    Het nadeel van deze methode is dat deze niet kan worden gebruikt als de binnenunit een absolute positionering heeft.

    Afstemming met Flexbox moderne manier Bij verticale uitlijning wordt gebruik gemaakt van de flexibele boxindeling (in de volksmond bekend als Flexbox). Met deze module kunt u de positionering van elementen op de pagina flexibel regelen en ze vrijwel overal rangschikken. Middenuitlijning voor Flexbox is een zeer eenvoudige taak.

    Het buitenste blok moet worden ingesteld op weergave: flex en het binnenste blok op marge: auto . En dat is alles! Prachtig, nietwaar?

    Buitenste (weergave: flex; breedte: 200px; hoogte: 200px; ) .innerlijke ( breedte: 100px; marge: auto; )
    http://jsfiddle.net/c1bgfffq/14/

    Het nadeel van deze methode is dat Flexbox alleen door moderne browsers wordt ondersteund.

    Welke methode moet ik kiezen? Je moet uitgaan van de probleemstelling:
    • Om tekst verticaal uit te lijnen, is het beter om verticale inspringingen of de eigenschap line-height te gebruiken.
    • Voor absoluut gepositioneerde elementen met een bekende hoogte (bijvoorbeeld pictogrammen) is de methode met een negatieve margin-top-eigenschap ideaal.
    • Voor complexere gevallen, wanneer de hoogte van het blok onbekend is, moet u een pseudo-element of de eigenschap transform gebruiken.
    • Als je zoveel geluk hebt dat je oudere versies van de IE-browser niet hoeft te ondersteunen, dan is het natuurlijk beter om Flexbox te gebruiken.

    Tags: tags toevoegen



GERELATEERDE ARTIKELEN