Het plaatsen van items op een webpagina is essentieel voor het algehele ontwerp. Hoewel er andere manieren zijn om de lay-out te beïnvloeden, zoals het gebruik van tabellen (die we niet aanbevelen), kun je CSS het beste gebruiken.
Hieronder zullen we bekijken hoe u een eenvoudige inline property in CSS-stijl kunt gebruiken om afbeeldingen, tabellen, alinea's en meer uit te lijnen.
Notitie: Dezezelfde methoden kunnen ook op externe stylesheets worden gebruikt, maar omdat deze van toepassing zijn op afzonderlijke items en waarschijnlijk op die manier moeten blijven, is het het beste om in line styling te gebruiken zoals hieronder wordt vermeld.
Tekst alinea's uitlijnen
De alineatag is de eerste plaats om te beginnen met het opmaken van uw webpagina. Het openen en sluiten van tags zien er als volgt uit:
De standaarduitlijning van tekst in een alinea bevindt zich aan de linkerkant van de pagina, maar u kunt ook uw alinea's rechts en in het midden uitlijnen.
Met de eigenschap float kunt u alinea's uitlijnen rechts of links van het bovenliggende element. Alle andere elementen binnen dat bovenliggende element vloeien rond het zwevende element.
Om het beste effect met een alinea te krijgen, is het het beste om een breedte in te stellen voor de alinea die kleiner is dan het container (bovenliggende) element.
Lijn de tekst in alinea's uit
De meest interessante uitlijning voor alineatekst is waarschijnlijk "rechtvaardiging", die de browser vertelt om de tekst in hoofdzaak weer te geven aan zowel de rechter- als de linkerzijde van het venster.
Als u de tekst in een alinea wilt verantwoorden, gebruikt u de eigenschap text-align.
U kunt ook alle tekst in een alinea aan de rechterkant of aan de linkerkant (de standaardinstelling) uitlijnen met behulp van de eigenschap text-align.
De eigenschap text-align lijnt de tekst in het element uit. Technisch gezien is het niet de bedoeling dat afbeeldingen worden uitgelijnd in de alinea of een ander element, maar de meeste browsers behandelen afbeeldingen als inline voor deze eigenschap.
Afbeeldingen uitlijnen
Met behulp van de eigenschap float op een afbeeldingstag kunt u de plaatsing van afbeeldingen op de pagina definiëren en hoe de tekst eromheen loopt.
Net als de bovenstaande alinea's plaatst de eigenschap floatstijl in de afbeeldingstag uw afbeelding op de pagina en vertelt de browser hoe tekst en andere elementen rond die afbeelding moeten vloeien.
Tekst die volgt op de bovenstaande afbeeldingstag, vloeit rond de afbeelding naar rechts terwijl de afbeelding links van het scherm wordt weergegeven.
Als ik wil dat de tekst stopt met het omsluiten van de afbeelding, gebruik ik de eigenschap clear:
Meer dan alinea's uitlijnen
Maar wat als u meer dan alleen een alinea of afbeelding wilt uitlijnen? Je kunt eenvoudig een stijlproperty in elke alinea zetten, maar er is een tag die je kunt gebruiken die effectiever is:
Omzeil eenvoudig de tekst en afbeeldingen (inclusief HTML-tags) met de tag en de stijleigenschap (float of text-align) en alles in die divisie wordt uitgelijnd zoals u het wilt.
Houd er rekening mee dat alignments die aan alinea's of afbeeldingen in de divisie zijn toegevoegd, worden gehonoreerd, waardoor de tag wordt overschreven.
