Van de auteur: Ik heet je opnieuw welkom op de pagina's van onze blog. In het artikel van vandaag wil ik het hebben over verschillende uitlijningstechnieken die kunnen worden toegepast op zowel blokken als hun inhoud. In het bijzonder hoe blokken in CSS uit te lijnen, evenals tekstuitlijning.
Blokken uitlijnen naar het midden
In CSS is het centreren van een blok eenvoudig. Dit is voor velen de meest bekende techniek, maar ik zou er nu eerst over willen praten. Dit betekent horizontaal gecentreerde uitlijning ten opzichte van het bovenliggende element. Hoe wordt het gedaan? Laten we zeggen dat we een container hebben en ons proefonderwerp zit erin:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Laten we aannemen dat dit de sitekop is. Het strekt zich niet uit over de gehele breedte van het venster en we moeten het centreren. Wij schrijven als volgt:
#kop( breedte / max. breedte: 800px; marge: 0 automatisch; |
We moeten de exacte of maximale breedte opgeven en vervolgens de sleuteleigenschap opschrijven: margin: 0 auto. Het stelt de buitenste marges van onze koptekst in, de eerste waarde bepaalt de boven- en ondermarges, en de tweede bepaalt de rechter- en linkermarges. De waarde auto vertelt de browser om automatisch de opvulling aan beide zijden te berekenen, zodat het element precies gecentreerd is in het bovenliggende element. Comfortabel!
Uitlijning van tekst
Dit is ook een heel eenvoudige techniek. Om alle inline-elementen uit te lijnen, kunt u de eigenschap text-align en de bijbehorende waarden gebruiken: links, rechts, gecentreerd. Dit laatste centreert de tekst, en dat is wat we nodig hebben. Je kunt een afbeelding zelfs op dezelfde manier uitlijnen, omdat het standaard ook een inline-element is.
Lijn tekst verticaal uit
Maar dit is ingewikkelder. Standaard is er geen eenvoudige, bekende eigenschap waarmee tekst gemakkelijk verticaal in een blokcontainer kan worden gecentreerd. Er zijn echter verschillende technieken die lay-outontwerpers in de loop der jaren hebben bedacht.
Stel de blokhoogte in met behulp van opvulling. De manier is om niet expliciet een hoogte in te stellen met behulp van hoogte, maar om deze kunstmatig te creëren met behulp van opvullingen aan de boven- en onderkant, die hetzelfde zouden moeten zijn. Laten we een willekeurig blok maken en de volgende eigenschappen ernaar schrijven:
div( achtergrond: #ccc; opvulling: 30px 0; )
div( achtergrond: #ccc; opvulling: 30px 0; |
De achtergrond is alleen bedoeld om zowel de randen als de opvulling visueel weer te geven. Nu bestaat de hoogte van het blok uit deze twee inkepingen en de lijn zelf, en het ziet er allemaal zo uit:
Definieer de lijnhoogte voor het blok. Ik denk dat dit een correctere manier is als je één regel tekst wilt uitlijnen. Hiermee kunt u de hoogte normaal schrijven, met behulp van de eigenschap height. Hierna moet hij ook de lijnhoogte instellen, gelijk aan de hoogte van het blok als geheel.
div( hoogte: 60px; lijnhoogte: 60px; )
div( hoogte: 60px; lijnhoogte: 60px; |
Het resultaat zal vergelijkbaar zijn met de bovenstaande afbeelding. Alles zal werken, zelfs als u opvulling toevoegt. Echter slechts voor één regel. Als u meer tekst in het element nodig heeft, werkt deze methode niet.
Converteer een blok naar een tabelcel. De essentie van deze methode is dat de tabelcel de eigenschap vertical-align: middle heeft, die het element verticaal centreert. Dienovereenkomstig moet het blok in dit geval op het volgende worden ingesteld:
div( weergave: tabelcel; verticaal uitlijnen: midden; )
div( weergave: tabel - cel; verticaal - uitlijnen: midden; |
Deze methode is goed omdat je zoveel tekst in het midden kunt uitlijnen als je wilt. Maar het is beter om display: table naar het blok te schrijven waarin onze div is genest, anders werkt het mogelijk niet.
Welnu, hier komen we bij de laatste techniek voor vandaag: dit is de verticale uitlijning van de blokken zelf. Het moet gezegd worden dat er, nogmaals, geen onroerend goed is dat specifiek hiervoor bedoeld is, maar er zijn een paar trucjes die je moet kennen.
Stel de inspringingen in als een percentage. Als u de hoogte van een bovenliggend element kent en er een ander blokelement in plaatst, kunt u het centreren met behulp van procentuele opvulling. De ouder heeft bijvoorbeeld een hoogte van 600 pixels. Je plaatst er een blokje in van 300 pixels hoog. Hoeveel moet je aan de boven- en onderkant terugtrekken om het te centreren? Elk 150 pixels, wat 25% is van de lengte van de ouder.
Deze methode maakt uitlijning alleen mogelijk als de afmetingen berekeningen mogelijk maken. En als je ouder 887 pixels hoog is, kun je niets nauwkeurig opnemen, dit is al duidelijk.
Voeg een element in een tabelcel in. Nogmaals, als we het bovenliggende element in een tabelcel transformeren, wordt het blok dat erin wordt ingevoegd automatisch verticaal gecentreerd. Om dit te doen hoeft de ouder alleen maar verticaal uitlijnen: midden in te stellen.
En als we daarnaast ook nog margin: 0 auto schrijven, dan wordt het element horizontaal gecentreerd!
De lay-out en uitlijning in het midden van websitepagina's is een creatieve onderneming en veroorzaakt vaak problemen voor beginners. Laten we dus kijken hoe we het moeten doen. Laten we zeggen dat we een pagina willen maken met de volgende structuur:
Onze pagina bestaat uit vier blokken: koptekst, menu, inhoud en voettekst. Om de pagina te centreren, plaatsen we deze vier blokken in één hoofdblok:
Sitekop
Inhoud
Onderaan de site
Met deze structuur als voorbeeld zullen we verschillende opties overwegen.
Lay-out en centrering van een rubbersite
Bij het aanleggen van een rubberlocatie is de belangrijkste meeteenheid -%, omdat de locatie zich over de breedte moet uitstrekken en alle vrije ruimte in beslag moet nemen.
Daarom zal de breedte van de blokken "koptekst" en "voettekst" 100% van de schermbreedte zijn. Laat de breedte van het "menu"-blok 30% zijn, en het "inhoud"-blok moet zich naast het "menu"-blok bevinden, d.w.z. het moet een linkermarge hebben (marge-links) met een breedte gelijk aan de breedte van het "menu"-blok, d.w.z. 30%.
Om de blokken "menu" en "inhoud" naast elkaar te laten zitten, laten we het blok "menu" zwevend maken en naar de linkerrand duwen. We zullen ook de achtergrondkleuren voor onze blokken instellen. Laten we dit nu allemaal in het stijlblad schrijven (op de style.css-pagina)
#header( achtergrond:#3e4982; breedte:100%; hoogte:110px; tekst uitlijnen:center; kleur:#FFFFFF; lettergrootte:24px; opvulling-top:40px; ) #menu( achtergrond:#6173cb; float :left; breedte:300px; tekst-uitlijning:center; lettergrootte:18px; #content(achtergrond:#ffffff; marge-links:30%; hoogte:300px; tekst-uitlijning:center; ) #footer(achtergrond: #3e4982; helder: beide; breedte: 100%; hoogte: 50 px; tekst uitlijnen: midden; kleur: #FFFFFF;
De hoogte van de blokken werd voorwaardelijk ingesteld zodat het resultaat zichtbaar was. Bekijk onze pagina in uw browser:
Als u de grootte van het browservenster wijzigt, verandert de breedte van alle blokken. Dit is niet altijd handig, omdat... Wanneer het menublok wordt uitgerekt, verschijnt er lege ruimte. Daarom ligt de breedte van het “menu”-blok vaak vast, dus laten we hetzelfde doen. Om dit te doen, vervangt u de waarden van de overeenkomstige eigenschappen in het stijlblad:
... #menu( achtergrond:#6173cb; float:left; breedte:200px; hoogte:300px; ) #content( achtergrond:#ffffff; margin-left:200px; hoogte:300px; ) ...
Nu strekt onze pagina zich natuurlijker uit. Dankzij de vloeiende lay-out beslaan pagina's de gehele breedte van het scherm, zodat pagina-uitlijning niet nodig is.
Maar als u wilt, kunt u ervoor zorgen dat uw pagina links en rechts van het scherm gelijke opvulling heeft. Om dit te doen, moet je een stijl toevoegen aan het "hoofdblok", dat een container is voor alle andere blokken:
Onze pagina ziet er nu zo uit:
Indeling en centrering van de site, vaste breedte
In dit geval zullen we vaste afmetingen voor onze blokken moeten instellen:
#main( breedte:800px; ) #header( achtergrond:#3e4982; breedte:800px; hoogte:150px; tekst uitlijnen:center; kleur:#FFFFFF; lettergrootte:24px; opvulling-top:40px; ) #menu ( achtergrond:#6173cb; float:left; breedte:200px; hoogte:300px; tekst uitlijnen:center; kleur:#FFFFFF; lettergrootte:18px; opvulling-top:10px; ) #content( achtergrond:#ffffff; marge-links:200px; hoogte:300px; tekst-uitlijnen:center; ) #footer( achtergrond:#3e4982; helder:beide; breedte:800px; hoogte:50px; tekst-uitlijnen:center; kleur:#FFFFFF; lettertype- grootte:14px; opvulling bovenaan:10px)
Nu wordt onze pagina tegen de linkerrand van het scherm gedrukt.
In dit geval kan de centrale uitlijning van sitepagina's als volgt worden uitgevoerd. Laten we niet vergeten dat onze pagina een "body"-tag heeft, die ook een breedte en wat opvulling kan krijgen.
Laten we dit doen: geef de "body"-tag een breedte van 800 pixels (zoals het "hoofd"-blok) en een opvulling links van 50%. Vervolgens wordt de volledige inhoud van het "hoofdblok" aan de rechterkant van het scherm weergegeven (d.w.z. van het midden naar rechts):
Om ervoor te zorgen dat ons ‘hoofdblok’ zich in het midden van het scherm bevindt, moet het midden ervan samenvallen met het midden van de ‘body’-tag. Die. je moet het "hoofd" blok met de helft van zijn grootte naar links verschuiven. De breedte van het "hoofdblok" is 800 pixels, wat betekent dat u de eigenschap "margin-left:-400px" erop moet instellen. Ja, deze eigenschap kan negatieve waarden aannemen, waarna de linkermarge wordt verkleind (d.w.z. naar links verschoven). En dit is precies wat we nodig hebben.
Het stijlblad ziet er nu als volgt uit:
body( breedte:800px; opvulling-links:50%; ) #main( breedte:800px; marge-links:-400px; ) #header( achtergrond:#3e4982; breedte:800px; hoogte:150px; tekst-align:center ; kleur:#FFFFFF; lettergrootte:24px; opvulling bovenaan:40px; ) #menu(achtergrond:#6173cb; zwevend:links; breedte:200px; hoogte:300px; tekstuitlijning:midden; kleur:#FFFFFF; lettergrootte:18px; opvulling-top:10px; ) #content( achtergrond:#ffffff; marge-links:200px; hoogte:300px; tekst-uitlijning:center; ) #footer(achtergrond:#3e4982; helder:beide; breedte:800px;tekst uitlijnen:center;lettergrootte:14px;
En onze pagina in de browser bevindt zich precies in het midden:
We hebben twee opties bekeken voor het centreren van sitepagina's; in feite zijn dit geen dogma's. U kunt experimenteren en uw eigen versie bedenken, kijk gewoon hoe deze in verschillende browsers werkt. Helaas kan wat goed wordt weergegeven in FireFox of Opera volkomen onbegrijpelijk worden weergegeven in IE en omgekeerd. En dit moeten we onthouden.
Veel succes met je creatieve zoektocht!
In CSS zijn sommige ogenschijnlijk eenvoudige dingen niet zo eenvoudig te doen. Eén van deze dingen is uitlijning, d.w.z. wanneer het ene element op een bepaalde manier ten opzichte van het andere moet worden gepositioneerd.
Dit artikel presenteert enkele kant-en-klare oplossingen die het werk van het horizontaal en/of verticaal centreren van elementen zullen helpen vereenvoudigen.
Let op: Onder elke oplossing staat een lijst met browsers die de versies aangeven waarin de opgegeven CSS-code werkt.
CSS - Blok centreren
1. Eén blok uitlijnen met het midden van een ander blok. In dit geval hebben de eerste en tweede blokken dynamische afmetingen.
Parent ( positie: relatief; ) .child ( positie: absoluut; links: 50%; top: 50%; -webkit-transform: vertalen(-50%, -50%); -moz-transform: vertalen(-50% , -50%); -ms-transform: vertalen(-50%, -50%);
- Chroom 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Eén blok uitlijnen met het midden van een ander blok. In dit geval heeft het tweede blok vaste afmetingen.
Parent ( positie: relatief; ) .child ( positie: absoluut; links: 50%; boven: 50%; /* breedte en hoogte van 2 blokken */ breedte: 500px; hoogte: 250px; /* Waarden worden bepaald afhankelijk op de grootte */ /* margin-left = - breedte / 2 */ margin-left: -250px; /* margin-top = - hoogte / 2 */ margin-top: -125px )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Eén blok uitlijnen met het midden van een ander blok. In dit geval heeft het tweede blok afmetingen gespecificeerd in percentages.
Parent ( positie: relatief; ) .child ( positie: absoluut; /* breedte en hoogte van 2 blokken in % */ hoogte: 50%; breedte: 50%; /* Waarden worden bepaald afhankelijk van de grootte in % * / links: 25% /* (100% - breedte) / 2 */ boven: 25% /* (100% - hoogte) / 2 */ )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS - Horizontale uitlijning
1. Eén blokelement (weergave: blok) horizontaal uitlijnen ten opzichte van een ander (waarin het zich bevindt):
Blokkeren (marge-links: auto; marge-rechts: auto; )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Lijn een lijn- (weergave: inline) of lijnblok- (weergave: inline-blok)-element horizontaal uit:
Parent (tekst uitlijnen: centreren; ) .child (weergave: inline-block; )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
CSS - Verticale uitlijning
1. Centreer het ene element (display: inline, display: inline-block) ten opzichte van het andere (waar het zich in bevindt) in het midden. Het bovenliggende blok in dit voorbeeld heeft een vaste hoogte, die wordt ingesteld met behulp van de CSS-eigenschap line-height.
Parent ( regelhoogte: 500px; ) .child ( weergave: inline-block; verticaal uitgelijnd: midden; )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Het ene blok verticaal ten opzichte van het andere centreren door de ouder als een tabel weer te geven, en het kind als een cel van deze tabel.
Parent (weergave: tabel; ) .child (weergave: tabelcel; verticaal uitgelijnd: midden; )
Browsers die deze oplossing ondersteunen:
- Chroom 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Als je nog andere interessante trucs of handige kant-en-klare uitlijnoplossingen kent, deel ze dan in de reacties.
Het verticaal centreren van elementen met behulp van CSS is een taak die voor ontwikkelaars enige problemen oplevert. Er zijn echter verschillende methoden om het op te lossen, die vrij eenvoudig zijn. Deze les presenteert zes opties voor het verticaal centreren van inhoud.
Laten we beginnen met een algemene beschrijving van het probleem.
Verticaal centreringsprobleem
Horizontaal centreren is heel eenvoudig en gemakkelijk. Wanneer het gecentreerde element inline is, gebruiken we de uitlijningseigenschap ten opzichte van het bovenliggende element. Wanneer het element op blokniveau is, stellen we de breedte in en de automatische instelling van de linker- en rechtermarges.
De meeste mensen verwijzen bij het gebruik van de eigenschap text-align: naar de eigenschap vertical-align voor verticaal centreren. Alles ziet er vrij logisch uit. Als u tabelsjablonen heeft gebruikt, heeft u waarschijnlijk uitgebreid gebruik gemaakt van het valign-attribuut, wat de overtuiging versterkt dat verticaal uitlijnen de juiste manier is om het probleem op te lossen.
Maar het valign-attribuut werkt alleen op tabelcellen. En de eigenschap verticaal uitlijnen lijkt er erg op. Het heeft ook invloed op tabelcellen en enkele inline-elementen.
De waarde van de eigenschap Vertical-align is relatief ten opzichte van het bovenliggende inline-element.
- In een tekstregel is de uitlijning relatief ten opzichte van de regelhoogte.
- De tabelcel gebruikt uitlijning ten opzichte van een waarde die is berekend door een speciaal algoritme (meestal de rijhoogte).
Maar helaas werkt de eigenschap verticaal uitlijnen niet op elementen op blokniveau (bijvoorbeeld alinea's binnen een div-element). Deze situatie kan ertoe leiden dat men denkt dat er geen oplossing bestaat voor het probleem van verticale uitlijning.
Maar er zijn andere methoden voor het centreren van blokelementen, waarvan de keuze afhangt van wat er wordt gecentreerd ten opzichte van de buitenste container.
Lijn-hoogte methode
Deze methode werkt wanneer u één regel tekst verticaal wilt centreren. Het enige wat u hoeft te doen is de regelhoogte groter in te stellen dan de lettergrootte.
Standaard wordt de witruimte gelijkmatig verdeeld aan de boven- en onderkant van de tekst. En de lijn wordt verticaal gecentreerd. Vaak wordt de lijnhoogte gelijk gemaakt aan de elementhoogte.
HTML:
CSS:
#child ( lijnhoogte: 200px; )
Deze methode werkt in alle browsers, maar kan slechts voor één regel worden gebruikt. De waarde 200 px in het voorbeeld is willekeurig gekozen. U kunt elke waarde gebruiken die groter is dan de lettergrootte van de tekst.
Een afbeelding centreren met behulp van lijnhoogte
Wat als de inhoud een afbeelding is? Zal de bovenstaande methode werken? Het antwoord ligt in nog een regel CSS-code.
HTML:
CSS:
#parent ( lijnhoogte: 200px; ) #parent img ( verticaal uitgelijnd: midden; )
De waarde van de eigenschap line-height moet groter zijn dan de hoogte van de afbeelding.
CSS-tabelmethode
Hierboven werd vermeld dat de eigenschap Vertical-align wordt gebruikt voor tabelcellen, waar deze prima werkt. We kunnen ons element weergeven als een tabelcel en de eigenschap Vertical-align gebruiken om de inhoud verticaal te centreren.
Opmerking: Een CSS-tabel is niet hetzelfde als een HTML-tabel.
HTML:
CSS:
#parent (weergave: tabel;) #child (weergave: tabelcel; verticaal uitgelijnd: midden; )
We stellen de tabeluitvoer in op het bovenliggende div-element en voeren het geneste div-element uit als een tabelcel. U kunt nu de eigenschap Vertical-align gebruiken voor de binnencontainer. Alles daarin wordt verticaal gecentreerd.
In tegenstelling tot de bovenstaande methode kan de inhoud in dit geval dynamisch zijn, omdat het div-element van grootte verandert afhankelijk van de inhoud.
Het nadeel van deze methode is dat deze niet werkt in oudere versies van IE. U moet de eigenschap display: inline-block gebruiken voor de geneste container.
Absolute positionering en negatieve marges
Deze methode werkt ook in alle browsers. Maar het vereist dat het element dat wordt gecentreerd een hoogte krijgt.
De voorbeeldcode voert tegelijkertijd horizontale en verticale centrering uit:
HTML:
CSS:
#parent (positie: relatief;) #child ( positie: absoluut; boven: 50%; links: 50%; hoogte: 30%; breedte: 50%; marge: -15% 0 0 -25%; )
Eerst stellen we het positioneringstype van het element in. Vervolgens stellen we de eigenschappen bovenaan en links van het geneste div-element in op 50%, wat overeenkomt met het midden van het bovenliggende element. Maar het midden is de linkerbovenhoek van het geneste element. Daarom moet u het optillen (halve hoogte) en naar links verplaatsen (halve breedte), en dan valt het midden samen met het midden van het bovenliggende element. Het is dus noodzakelijk om de hoogte van het element te kennen. Vervolgens stellen we het element in met negatieve boven- en linkermarges die respectievelijk gelijk zijn aan de helft van de hoogte en breedte.
Deze methode werkt niet in alle browsers.
Absolute positionering en stretching
De voorbeeldcode voert verticale en horizontale centrering uit.
HTML:
CSS:
#parent (positie: relatief;) #child ( positie: absoluut; boven: 0; onder: 0; links: 0; rechts: 0; breedte: 50%; hoogte: 30%; marge: auto; )
Het idee achter deze methode is om het geneste element uit te rekken tot alle vier de randen van het bovenliggende element door de eigenschappen boven, onder, rechts en links in te stellen op 0.
Als u de marges zo instelt dat ze aan alle kanten automatisch worden gegenereerd, worden aan alle vier de zijden gelijke waarden ingesteld en wordt ons geneste div-element gecentreerd op het bovenliggende element.
Helaas werkt deze methode niet in IE7 en lager.
Gelijke ruimtes boven en onder
Bij deze methode wordt expliciet gelijke opvulling ingesteld aan de boven- en onderkant van het bovenliggende element.
HTML:
CSS:
#parent ( opvulling: 5% 0; ) #child ( opvulling: 10% 0; )
De voorbeeld-CSS-code stelt de bovenste en onderste opvulling in voor beide elementen. Voor een genest element zal het instellen van de opvulling dienen om het verticaal te centreren. En de opvulling van het bovenliggende element centreert het geneste element daarin.
Relatieve maateenheden worden gebruikt om de grootte van elementen dynamisch te wijzigen. En voor absolute meeteenheden zul je berekeningen moeten doen.
Als het bovenliggende element bijvoorbeeld een hoogte van 400 px heeft en het geneste element 100 px, dan is aan de boven- en onderkant 150 px opvulling nodig.
150 + 150 + 100 = 400
Door % te gebruiken, kunt u de berekeningen aan de browser overlaten.
Deze methode werkt overal. Het nadeel is dat er berekeningen nodig zijn.
Opmerking: Deze methode werkt door de buitenste opvulling van een element in te stellen. Je kunt ook marges binnen een element gebruiken. De beslissing om marges of opvulling te gebruiken moet worden genomen afhankelijk van de specifieke kenmerken van het project.
drijvende div
Deze methode maakt gebruik van een leeg div-element dat zweeft en helpt de positie van ons geneste element in het document te bepalen. Merk op dat de zwevende div vóór ons geneste element in de HTML-code wordt geplaatst.
HTML:
CSS:
#parent (hoogte: 250px;) #floater ( float: links; hoogte: 50%; breedte: 100%; marge-onder: -50px; ) #child ( clear: beide; hoogte: 100px; )
We verschuiven de lege div naar links of rechts en stellen de hoogte in op 50% van het bovenliggende element. Op deze manier wordt de bovenste helft van het bovenliggende element gevuld.
Omdat deze div zweeft, wordt deze uit de normale stroom van het document verwijderd en moeten we de tekst op het geneste element uitpakken. In het voorbeeld wordt clear: beide gebruikt, maar het is voldoende om dezelfde richting te gebruiken als de offset van een zwevend leeg div-element.
De bovenrand van een genest div-element bevindt zich direct onder de onderrand van een leeg div-element. We moeten het geneste element met de helft van de hoogte van het zwevende lege element omhoog verplaatsen. Om dit probleem op te lossen, gebruikt u een negatieve eigenschapswaarde margin-bottom voor een zwevend leeg div-element.
Deze methode werkt ook in alle browsers. Het gebruik ervan vereist echter een extra leeg div-element en kennis van de hoogte van het geneste element.
Conclusie
Alle beschreven methoden zijn eenvoudig te gebruiken. De moeilijkheid is dat geen van deze voor alle gevallen geschikt is. U moet het project analyseren en het project kiezen dat het beste bij de vereisten past.
Vlad Merzjevitsj
Doordat de inhoud van tabelcellen gelijktijdig 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".
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
Laten we eens kijken naar enkele voorbeelden van tekstuitlijning volgens de onderstaande afbeelding.
Uitlijning bovenaan
Om de bovenste uitlijning van de celinhoud voor een tag op te geven
Voorbeeld 2: Valign gebruiken
| Kolom 1 | Kolom 2 |
In dit voorbeeld worden de celkenmerken bestuurd met behulp van tagparameters
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
In dit geval bevindt de formule zich strikt in het midden van het browservenster en bevindt het nummer zich aan de rechterkant. Om de 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
 |
(18.6) |
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
In dit voorbeeld wordt voor de cellen waarvoor een juiste uitlijning vereist is, het attribuut align="right" toegevoegd.
