Lijnt een blokelement uit op het midden. Horizontale en verticale uitlijning van elementen

Heel vaak is het de taak om een ​​blok in het midden van de pagina/het scherm uit te lijnen, en zelfs zo zonder een Java-script, zonder rigide afmetingen of negatieve inspringingen in te stellen, en zodat de schuifbalken voor de ouder werken als het blok zijn grootte overschrijdt . Er zijn nogal wat eentonige voorbeelden op internet over hoe je een blok op het midden van het scherm kunt uitlijnen. In de regel zijn de meeste van hen gebaseerd op dezelfde principes.

Hieronder staan ​​​​de belangrijkste manieren om het probleem op te lossen, hun voor- en nadelen. Om de essentie van de voorbeelden te begrijpen, raad ik aan om de hoogte/breedte van het resultaatvenster in de voorbeelden op de gegeven links te verkleinen.

Optie 1: Negatieve inspringing.

Parent ( breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0; links: 0; overloop: auto; ) .block ( breedte: 250px; hoogte: 250px; positie: absoluut; boven: 50%; links : 50%; marge: -125px 0 0 -125px; img (max-breedte: 100%; hoogte: auto; weergave: blok; marge: 0 auto; rand: geen; ) )

Optie 2. Automatische inspringing.

Parent ( breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0; links: 0; overloop: auto; ) .block ( breedte: 250px; hoogte: 250px; positie: absoluut; boven: 0; rechts: 0; onder: 0; links: 0; marge: auto; img (max. breedte: 100%; hoogte: auto; weergave: blok; marge: 0 auto; rand: geen; )

Optie 3. Tabel.

Parent ( breedte: 100%; hoogte: 100%; weergave: tabel; positie: absoluut; boven: 0; links: 0; > .inner ( weergave: tabelcel; tekstuitlijning: midden; verticaal uitlijning: midden; ) ) .block (weergave: inline-block; img (weergave: blok; rand: geen; ) )

Om een ​​scroll aan dit voorbeeld toe te voegen, moet je nog een element aan het ontwerp toevoegen.
Voorbeeld: jsfiddle.net/serdidg/fk5nqh52/3.

Optie 4. Pseudo-element.

Parent ( breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0; links: 0; overloop: auto; witruimte: norap; tekst uitlijnen: midden; lettergrootte: 0; &:before ( hoogte: 100%; weergave: inline-blok; verticaal uitlijnen: midden; img (weergave: blok; rand: geen; ) ;

Of, als u wilt dat de ouder alleen de hoogte en breedte van het venster in beslag neemt, en niet de hele pagina:

Parent ( positie: vast; boven: 0; rechts: 0; onder: 0; links: 0; overflow: auto; witruimte: norap; tekst uitlijnen: midden; lettergrootte: 0; &:before ( hoogte: 100%; weergave: inline-blok; verticaal uitlijnen: midden; inhoud: "";

Optie 5. Flexbox.

Parent ( breedte: 100%; hoogte: 100%; positie: vast; boven: 0; links: 0; weergave: flex; items uitlijnen: midden; inhoud uitlijnen: midden; inhoud uitvullen: midden; overloop: automatisch; ) .block (achtergrond: #60a839; img (weergave: blok; rand: geen; ) )

Optie 6. Transformeren.

Parent ( breedte: 100%; hoogte: 100%; positie: vast; boven: 0; links: 0; overloop: auto; ) .block ( positie: absoluut; boven: 50%; links: 50%; transformeren: vertalen( -50%, -50%); img (weergave: blok; ) )

Optie 7. Knop.

Parent ( breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0; links: 0; overloop: auto; achtergrond: geen; rand: geen; omtrek: geen; ) .block ( weergave: inline-block; img (weergave: blok;; rand: geen; ) )

Bonus

U kunt de afbeelding ook centraal uitlijnen en de afbeelding groter maken ouder, schaal het op maat ouder.
Voorbeeld: jsfiddle.net/serdidg/nfqg9rza/3.
Voorbeeld met een grote afbeelding:

Bij het opmaken van een pagina is het vaak nodig om de centrering uit te voeren met behulp van de CSS-methode: bijvoorbeeld het centreren van het hoofdblok. Er zijn verschillende opties om dit probleem op te lossen, die allemaal vroeg of laat door elke lay-outontwerper moeten worden gebruikt.

Tekstuitlijning centreren

Vaak is het voor decoratieve doeleinden nodig om de tekst in het midden uit te lijnen; in dit geval kunt u met CSS de lay-outtijd verkorten. Voorheen gebeurde dit met behulp van HTML-attributen, maar nu vereist de standaard dat tekst wordt uitgelijnd met behulp van stylesheets. In tegenstelling tot blokken, waarvoor je de marges moet wijzigen, gebeurt het centreren van tekst in CSS met behulp van een enkele regel:

• tekst uitlijnen: centreren;

Deze eigenschap wordt geërfd en doorgegeven van de ouder aan alle nakomelingen. Heeft niet alleen invloed op de tekst, maar ook op andere elementen. Om dit te doen, moeten ze inline (bijvoorbeeld span) of inline-block zijn (alle blokken waarvoor de eigenschap display: block is ingesteld). Met deze laatste optie kunt u ook de breedte en hoogte van het element wijzigen en de inspringingen flexibeler aanpassen.

Vaak wordt uitlijning op pagina's toegewezen aan de tag zelf. Dit maakt de code onmiddellijk ongeldig, aangezien het W3C het align-attribuut heeft afgeschaft. Het gebruik ervan op een pagina wordt niet aanbevolen.

Een blok uitlijnen op het midden

Als je een div wilt centreren, biedt CSS een behoorlijk handige manier: het gebruik van marges. Inspringingen kunnen worden ingesteld voor zowel blokelementen als inline-blokelementen. De eigenschapswaarde moet 0 (verticale opvulling) en auto (automatische horizontale opvulling) zijn:

• marge:0 automatisch;

Nu wordt deze optie als absoluut geldig erkend. Door externe opvulling te gebruiken, kunt u ook instellen dat de afbeelding gecentreerd wordt: hiermee kunt u veel problemen oplossen die verband houden met de positionering van een element op de pagina.

Lijn een blok links of rechts uit

Soms is CSS-middenuitlijning niet vereist, maar moet u twee blokken naast elkaar plaatsen: één aan de linkerrand, de andere aan de rechterkant. Voor dit doel is er een float-eigenschap, die een van de volgende drie waarden kan aannemen: links, rechts of geen. Laten we zeggen dat je twee blokken hebt die naast elkaar moeten worden geplaatst. Dan zal de code er zo uitzien:

• .left (zwevend:links;)
• .right(zweven:rechts)

Als er nog een derde blok onder de eerste twee blokken moet staan ​​(bijvoorbeeld een voettekst), dan moet dit de eigenschap clear krijgen:

• .left (zwevend:links;)
• .right(zweven:rechts)
• voettekst (duidelijk:beide)

Feit is dat blokken met de klassen links en rechts buiten de algemene stroom vallen, dat wil zeggen dat alle andere elementen het bestaan ​​van uitgelijnde elementen negeren. De eigenschap clear:both zorgt ervoor dat de voettekst of een ander blok elementen kan zien die uit de stroom zijn gevallen en verbiedt zweven zowel links als rechts. Daarom wordt in ons voorbeeld de voettekst naar beneden verplaatst.

Verticale uitlijning

Er zijn momenten waarop het niet voldoende is om de middenuitlijning in te stellen met behulp van CSS-methoden; u moet ook de verticale positie van het onderliggende blok wijzigen. Elk inline- of inline-blokelement kan aan de boven- of onderkant, in het midden van een bovenliggend element of op elke locatie worden genest. Meestal moet het blok op het midden worden uitgelijnd; hiervoor wordt het kenmerk verticale uitlijning gebruikt. Laten we zeggen dat er twee blokken zijn, waarvan de ene in de andere is genest. In dit geval is het binnenste blok een inline-block-element (weergave: inline-block). U moet het onderliggende blok verticaal uitlijnen:

• uitlijning bovenaan - .child(verticaal uitlijnen:top);
• uitlijning in het midden - .child(verticaal uitlijnen: midden);
• uitlijning onderaan - .child(verticaal uitlijnen:onder);

Noch tekstuitlijning, noch verticaal uitlijning heeft invloed op blokelementen.

Mogelijke problemen met uitgelijnde blokken

Soms kan het centreren van een div met behulp van CSS wat problemen veroorzaken. Als u bijvoorbeeld float gebruikt: laten we zeggen dat er drie blokken zijn: .first, .second en .third. Het tweede en derde blok liggen in het eerste. Het element met klasse tweede is links uitgelijnd en het laatste blok is rechts uitgelijnd. Na het afvlakken vielen beiden uit de stroom. Als het ouderelement geen hoogte heeft ingesteld (bijvoorbeeld 30em), zal het niet langer uitrekken tot de hoogte van zijn onderliggende blokken. Om deze fout te voorkomen, gebruikt u een “spacer” - een speciaal blok dat .second en .third ziet. CSS-code:

• .second(zweven:links)
• .derde(zweven:rechts)
• .clearfix(hoogte:0; helder: beide;)

Vaak wordt de pseudo-class:after gebruikt, waarmee je de blokken ook op hun plaats kunt terugzetten door een pseudo-spacer te maken (in het voorbeeld ligt een div met de containerklasse inside.first en bevat.left en.right) :

• .left(zwevend:links)
• .right(zweven:rechts)
• .container:after(inhoud:""; weergave:tabel; helder:beide;)

De bovenstaande opties zijn de meest voorkomende, hoewel er verschillende variaties zijn. Door te experimenteren kun je altijd de eenvoudigste en handigste manier vinden om een ​​pseudo-spacer te maken.

Een ander probleem waar lay-outontwerpers vaak mee te maken krijgen, is de uitlijning van inline-blokelementen. Na elk ervan wordt automatisch een spatie toegevoegd. De marge-eigenschap, die is ingesteld op een negatieve inspringing, helpt hiermee om te gaan. Er zijn andere methoden die veel minder vaak worden gebruikt: bijvoorbeeld nulstelling. In dit geval wordt font-size: 0 geschreven in de eigenschappen van het bovenliggende element. Als er tekst in blokken staat, wordt de vereiste lettergrootte al geretourneerd in de eigenschappen van inline-blokelementen. Bijvoorbeeld lettergrootte:1em. Deze methode is niet altijd handig, daarom wordt de optie met externe inspringingen veel vaker gebruikt.

Door blokken uit te lijnen, kunt u mooie en functionele pagina's maken: dit omvat de lay-out van de algehele lay-out, de rangschikking van producten in online winkels en foto's op een visitekaartjewebsite.

Elke lay-outontwerper wordt voortdurend geconfronteerd met de noodzaak om inhoud in een blok uit te lijnen: horizontaal of verticaal. Er zijn verschillende goede artikelen over dit onderwerp, maar ze bieden allemaal veel interessante, maar weinig praktische opties, waardoor je extra tijd moet besteden aan het benadrukken van de belangrijkste punten. Ik besloot deze informatie te presenteren in een vorm die voor mij handig is, om niet meer te googlen.

Blokken met bekende afmetingen uitlijnen

De eenvoudigste manier om CSS te gebruiken is door blokken uit te lijnen die een bekende hoogte (voor verticale uitlijning) of breedte (voor horizontale uitlijning) hebben.

Uitlijning met behulp van opvulling

Soms kun je een element niet centreren, maar er randen aan toevoegen met behulp van de " opvulling".

Er is bijvoorbeeld een afbeelding van 200 bij 200 pixels, en je moet deze centreren in een blok van 240 bij 300. We kunnen de hoogte en breedte van het buitenste blok = 200px instellen en 20 pixels aan de boven- en onderkant toevoegen en 50 links en rechts.

Absoluut gepositioneerde blokken uitlijnen

Als het blok is ingesteld op " positie: absoluut", dan kan het relatief ten opzichte van zijn dichtstbijzijnde ouder worden gepositioneerd met "position: relative". Hiervoor zijn alle eigenschappen (" bovenkant","rechts","onderkant","links") van het binnenste blok om dezelfde waarde toe te wijzen, evenals "marge: auto".

*Er is een nuance: de breedte (hoogte) van het binnenblok + de waarde van links (rechts, onder, boven) mag de afmetingen van het bovenliggende blok niet overschrijden. Het is veiliger om 0 (nul) toe te wijzen aan de linkereigenschappen (rechts, onder, boven).

Horizontale uitlijning

Uitlijning met behulp van "text-align: center"

Om tekst in een blok uit te lijnen, is er een speciale eigenschap " tekst uitlijnen". Indien ingesteld op " centrum"Elke tekstregel wordt horizontaal uitgelijnd. Voor tekst met meerdere regels wordt deze oplossing uiterst zelden gebruikt; vaker wordt deze optie gevonden voor het uitlijnen van overspanningen, links of afbeeldingen.

Ik moest ooit wat tekst verzinnen om te laten zien hoe tekstuitlijning werkt met behulp van CSS, maar er kwam niets interessants in me op. In eerste instantie besloot ik ergens een kinderrijmpje te kopiëren, maar ik herinnerde me dat dit de uniciteit van het artikel zou kunnen aantasten, en dat onze lieve lezers het niet op Google zouden kunnen vinden. En toen besloot ik deze paragraaf te schrijven - het punt ligt er tenslotte niet mee, maar het punt ligt in lijn.

Het is vermeldenswaard dat deze eigenschap niet alleen voor tekst werkt, maar ook voor alle inline-elementen ("display: inline").

Maar deze tekst is links uitgelijnd, maar staat in een blok dat gecentreerd is ten opzichte van de wrapper.

Blokken uitlijnen met behulp van marge

Blokelementen met een bekende breedte kunnen eenvoudig horizontaal worden uitgelijnd door ze in te stellen op "margin-left: auto; margin-right: auto". Meestal wordt de afkorting gebruikt: " marge: 0 auto" (elke waarde kan worden gebruikt in plaats van nul). Maar deze methode is niet geschikt voor verticale uitlijning.

Dit is hoe je alle blokken waar mogelijk moet uitlijnen (waarbij een vaste of absolute positionering niet vereist is) - dit is het meest logische en adequate. Hoewel dit voor de hand liggend lijkt, heb ik soms enge voorbeelden met negatieve streepjes gezien, dus besloot ik het te verduidelijken.

Verticale uitlijning

Verticale uitlijning is veel problematischer - blijkbaar was dit niet voorzien in de CSS. Er zijn verschillende manieren om het gewenste resultaat te bereiken, maar ze zijn niet allemaal erg mooi.

Uitlijning met lijnhoogte-eigenschap

In het geval dat er slechts één lijn in een blok zit, kunt u de verticale uitlijning ervan bereiken door de " lijn-hoogte" en deze op de gewenste hoogte in te stellen. Voor de betrouwbaarheid is het de moeite waard om ook "height" in te stellen, waarvan de waarde gelijk zal zijn aan de waarde van "line-height", omdat dit laatste niet in alle browsers wordt ondersteund.

Het is ook mogelijk om blokuitlijning met meerdere lijnen te realiseren. Om dit te doen, moet u een extra wikkelblok gebruiken en de lijnhoogte hierop instellen. Een intern blok kan uit meerdere regels bestaan, maar moet "inline" zijn. U moet er "verticaal uitlijnen: midden" op toepassen.

Voor het wrapperblok moet "font-size: 0" zijn ingesteld. Als u de lettergrootte niet op nul instelt, voegt de browser een paar extra pixels toe. U zult ook de lettergrootte en regelhoogte voor het binnenste blok moeten opgeven, omdat deze eigenschappen worden overgenomen van het bovenliggende blok.

Verticale uitlijning in tabellen

Eigendom " verticaal uitlijnen" heeft ook invloed op tabelcellen. Als de waarde is ingesteld op "midden", wordt de inhoud in de cel uitgelijnd op het midden. Natuurlijk wordt de tabelindeling tegenwoordig als archaïsch beschouwd, maar in uitzonderlijke gevallen kunt u deze simuleren door " weergave: tabelcel".

Ik gebruik deze optie meestal voor verticale uitlijning. Hieronder ziet u een voorbeeld van de lay-out van een voltooid project. Het is het beeld dat op deze manier verticaal gecentreerd is, dat interessant is.

Houd er rekening mee dat als een element een andere “float”-set dan “none” heeft, het in ieder geval een blok zal zijn (weergave: blok) - dan zul je een extra blokwrapper moeten gebruiken.

Uitlijning met een extra inline-element

En voor inline-elementen kunt u " verticaal uitlijnen: midden". Bovendien zijn alle elementen met " weergave: inline" die zich op dezelfde lijn bevinden, worden uitgelijnd met een gemeenschappelijke middenlijn.

U moet een hulpblok maken met een hoogte die gelijk is aan de hoogte van het bovenliggende blok, waarna het gewenste blok wordt gecentreerd. Om dit te doen is het handig om de pseudo-elementen:before of:after te gebruiken.

Weergave: flex en uitlijning

Als u niet veel om Explorer 8-gebruikers geeft, of zo veel om hen geeft dat u bereid bent een stukje extra javascript voor hen in te voegen, dan kunt u "display: flex" gebruiken. Flexboxen zijn geweldig in het omgaan met uitlijningsproblemen en schrijven gewoon "marge: auto" om de inhoud erin te centreren.

Tot nu toe ben ik deze methode praktisch nog nooit tegengekomen, maar er zijn geen speciale beperkingen voor.

Nou, dat is alles wat ik wilde schrijven over CSS-uitlijning. Nu zal het centreren van inhoud geen probleem zijn!

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 dit onderwerp indirect aangestipt, dus je hebt enige kennis op dit gebied.

In deze publicatie zal ik u echter vertellen over alle verschillende manieren om objecten uit te lijnen, en ook uitleggen hoe u alinea's kunt laten inspringen en opnieuw kunt uitlijnen. 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 term wordt in detail beschreven in het artikel ""), de html-specificatie zelf veroordeelt het gebruik < centrum>, omdat het voor de geldigheid noodzakelijk is om een ​​transitie te gebruiken DOCTYPE>.

Dit typelaat verboden elementen door.

Laten we nu verder gaan met het attribuut uitlijnen. Het stelt de horizontale uitlijning van objecten in op en past na de tag-declaratie. Meestal kan het worden gebruikt om inhoud links uit te lijnen ( links), langs de rechterrand ( rechts), gecentreerd ( centrum) en op tekstbreedte ( verantwoorden).

Hieronder geef ik een voorbeeld waarbij ik de afbeelding en paragraaf in het midden plaats.

Deze inhoud wordt gecentreerd.

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

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

Centreerhulpmiddelen in css

CSS-eigenschappen die zijn ontworpen om blokken, tekst en grafische inhoud uit te lijnen, 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 van tekstcentrering: dit is tekst-uitlijnen.

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

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

Zin aan de rechterkant

Zin met einde

Ik zal je iets vertellen over een klein trucje. Bij het selecteren van een waarde verantwoorden de laatste lijn kan onaantrekkelijk aan de onderkant bungelen. Om hem bijvoorbeeld in het midden te positioneren kun je gebruik maken van het pand tekst-uitlijn-laatste.

Gebruik de eigenschap om site-inhoud of tabelcellen verticaal uit te lijnen 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

C IN E TOVERNAAR

C IN E TOVERNAAR

Inkepingen

En uiteindelijk komen we bij alinea-inspringingen. De CSS-taal gebruikt een speciale eigenschap genaamd tekst-inspringen.

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

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

Vlad Merzjevitsj

Doordat de inhoud van tabelcellen tegelijkertijd horizontaal en verticaal uitgelijnd kan worden, worden de mogelijkheden voor het regelen van de positie van elementen ten opzichte van elkaar uitgebreid. Met tabellen kunt u de uitlijning van afbeeldingen, tekst, formuliervelden en andere elementen ten opzichte van elkaar en de webpagina als geheel instellen. Over het algemeen is uitlijning vooral nodig om visuele verbindingen tussen verschillende elementen tot stand te brengen, maar ook om ze te groeperen.

Verticale centrering

Eén manier om de bezoeker de focus en naam van de site te laten zien, is door een splashpagina te gebruiken. Dit is de eerste pagina waarop in de regel een flash-splash-scherm of een afbeelding staat die het hoofdidee van de site weergeeft. De afbeelding is ook een link naar andere delen van de site. U moet deze afbeelding in het midden van het browservenster plaatsen, ongeacht de monitorresolutie. Hiervoor kunt u een tafel gebruiken met een breedte en hoogte van 100% (voorbeeld 1).

Voorbeeld 1: Centreren van de tekening

In dit voorbeeld wordt de horizontale uitlijning ingesteld met behulp van de tagparameter align="center". en de inhoud van de cel is mogelijk niet verticaal gecentreerd, aangezien dit de standaardpositie is.

Om de tafelhoogte op 100% in te stellen, moet u deze verwijderen, is de code niet meer geldig.

Door de breedte en hoogte te gebruiken om het gehele beschikbare gebied van de webpagina te bestrijken, wordt ervoor gezorgd dat de inhoud van de tabel precies in het midden van het browservenster wordt uitgelijnd, ongeacht de grootte ervan.

Horizontale uitlijning

Door de kenmerken align (horizontale uitlijning) en valign (verticale uitlijning) van de tag te combineren , is het toegestaan ​​om verschillende soorten posities van elementen ten opzichte van elkaar in te stellen. In afb. Figuur 1 toont manieren om elementen horizontaal uit te lijnen.

Laten we enkele voorbeelden bekijken van tekstuitlijning volgens de onderstaande afbeelding.

Uitlijning bovenaan

Om de bovenste uitlijning van de celinhoud voor een tag op te geven u moet het valign-attribuut instellen met de waarde top (voorbeeld 2).

Voorbeeld 2: Valign gebruiken

Kolom 1

Kolom 2

In dit voorbeeld worden de celkenmerken bestuurd met behulp van tagparameters , maar het is ook handiger om tussen stijlen te wisselen.

In het bijzonder wordt de uitlijning in cellen gespecificeerd door de eigenschappen verticaal uitlijnen en tekst uitlijnen (voorbeeld 3).

Kolom 1

Kolom 2

Voorbeeld 3: Stijlen toepassen voor uitlijning

Om de code in te korten, wordt in dit voorbeeld een groep selectors gebruikt, omdat de eigenschappen voor verticale uitlijning en opvulling tegelijkertijd op twee cellen worden toegepast.

Onderuitlijning gebeurt op dezelfde manier, maar in plaats van de bovenste waarde wordt onderkant gebruikt.

Uitlijning midden

Standaard wordt de celinhoud uitgelijnd op het midden van de verticale lijn. Als de kolommen dus verschillende hoogtes hebben, moet u de uitlijning op de bovenrand instellen.

Soms moet u nog steeds de oorspronkelijke uitlijningsmethode behouden, bijvoorbeeld bij het plaatsen van formules, zoals weergegeven in Fig. 2.

(18.6)

In dit geval bevindt de formule zich strikt in het midden van het browservenster en bevindt het nummer zich aan de rechterkant. Om elementen op deze manier te rangschikken, hebt u een tabel met drie cellen nodig. De buitenste cellen moeten dezelfde afmetingen hebben, in de middelste cel is de uitlijning gecentreerd en in de rechtercel - langs de rechterrand (voorbeeld 4). Dit aantal cellen is nodig om ervoor te zorgen dat de formule in het midden wordt geplaatst.

Voorbeeld 4: Formule-uitlijning

In dit voorbeeld wordt de eerste cel van de tabel leeg gelaten; deze dient alleen om een ​​inspringing te maken, die overigens ook met behulp van stijlen kan worden ingesteld.

Formulierelementen uitlijnen

Met behulp van tabellen is het handig om de positie van formuliervelden te bepalen, vooral als ze worden afgewisseld met tekst. Een van de ontwerpopties voor het formulier, bedoeld voor het invoeren van een opmerking, wordt getoond in Fig. 3.

Om ervoor te zorgen dat de tekst naast de formuliervelden rechts wordt uitgelijnd en de formulierelementen zelf links worden uitgelijnd, hebt u een tabel met een onzichtbare rand en twee kolommen nodig. De linkerkolom bevat de tekst zelf, en de rechterkolom bevat tekstvelden (voorbeeld 5).
Voorbeeld 5: Formuliervelden uitlijnen
Naam

Opmerking