Horizontaal uitlijnen centrum css. Een blok naar links of rechts uitlijnen

Dit typeslaat verboden items over.

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

Hieronder zal ik een voorbeeld geven waarin de afbeelding en de alinea worden gecentreerd.

Deze inhoud wordt gecentreerd.

Merk op dat het attribuut dat we hebben geparseerd een iets andere betekenis heeft voor de afbeelding.

In het voorbeeld dat ik gebruikte uitlijnen = "midden "... Hiermee lijnt u de afbeelding uit zodat de zin duidelijk in het midden van de afbeelding staat.

Centreertools in css

Css-eigenschappen voor het uitlijnen van blokken, tekst en grafische inhoud worden veel vaker gebruikt. Dit is voornamelijk te danken aan het gemak en de flexibiliteit van de implementatie van de stijlen.

Laten we beginnen met de eerste eigenschap voor tekstcentrering - dit is tekst-uitlijnen.

Het werkt hetzelfde als uitlijnen. Van de trefwoorden kunt u er een uit de algemene lijst kiezen of de kenmerken van de voorouder erven ( erven).

Ik wil opmerken dat er nog 2 parameters kunnen worden ingesteld in css3: begin- afhankelijk van de regels voor het schrijven van de tekst (van rechts naar links of vice versa) stelt de uitlijning naar links of rechts (vergelijkbaar met het werk van links of rechts) en einde- het tegenovergestelde van start (bij het schrijven van tekst van links naar rechts, fungeert als rechts, bij het schrijven van rechts naar links - links).

Ik zal je een klein trucje vertellen. Bij het kiezen van een waarde verantwoorden de laatste regel kan lelijk van onderen bungelen. Om het bijvoorbeeld in het centrum te positioneren, kunt u het pand gebruiken 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.

inspringen

En tot slot zijn we met u meegekomen bij de inspringing in de alinea. De CSS-taal gebruikt een speciale eigenschap genaamd tekst streepje.

Hiermee kunt u zowel een rode lijn als een uitsteeksel maken (u moet een negatieve waarde opgeven).

Ik zou graag degenen willen prijzen die elk voorbeeld in de praktijk hebben uitgeprobeerd. Stuur links naar mijn blog naar vrienden en vergeet niet te abonneren. Veel geluk! Tot ziens!

Met vriendelijke groet, Roman Chueshov

Lezen: 675 keer

Elementen verticaal centreren met CSS is een uitdaging voor ontwikkelaars. Er zijn echter verschillende methoden om het op te lossen, die vrij eenvoudig zijn. Deze les presenteert 6 opties voor het verticaal centreren van inhoud.

Laten we beginnen met een algemene beschrijving van het probleem.

Probleem met verticaal centreren

Horizontaal centreren is heel eenvoudig en gemakkelijk. Als het gecentreerde element inline is, gebruikt u de eigenschap parent-align. Wanneer het element blokgebaseerd is, stellen we de breedte in en stellen we automatisch de linker- en rechtermarge in.

De meeste mensen verwijzen bij het gebruik van de eigenschap text-align: naar de eigenschap vertical-align om verticaal te centreren. Alles ziet er logisch genoeg uit. Als je sjablonen in tabelvorm hebt gebruikt, heb je het kenmerk valign waarschijnlijk veel gebruikt, wat de overtuiging versterkt dat verticaal uitlijnen de juiste manier is.

Maar het kenmerk valign werkt alleen op tabelcellen. En de eigenschap vertical-align lijkt er erg op. Het heeft ook invloed op tabelcellen en sommige inline-elementen.

De waarde van de eigenschap vertical-align heeft betrekking op het bovenliggende inline-element.

• In een regel tekst wordt de uitlijning uitgevoerd in relatie tot de regelhoogte.
• Uitlijning wordt gebruikt in de tabelcel in relatie tot de waarde die is berekend door een speciaal algoritme (meestal wordt de rijhoogte verkregen).

Helaas heeft de eigenschap vertical-align geen effect op elementen op blokniveau (bijvoorbeeld alinea's binnen een div-element). Deze situatie kan leiden tot het idee dat er geen oplossing is voor het probleem van verticale uitlijning.

Maar er zijn andere methoden voor het centreren van blokelementen, waarvan de keuze afhangt van wat gecentreerd is ten opzichte van de buitencontainer.

Lijn-hoogte methode:

Deze methode werkt wanneer u één regel tekst verticaal wilt centreren. Het enige dat u hoeft te doen, is de regelhoogte zo in te stellen dat deze groter is dan de lettergrootte.

Standaard wordt de vrije ruimte gelijkmatig verdeeld boven en onder aan de tekst. En de lijn wordt verticaal gecentreerd. Vaak wordt de lijnhoogte gelijk gemaakt aan de elementhoogte.

HTML:

CSS:

#child (regelhoogte: 200px;)

Deze methode werkt in alle browsers, hoewel deze maar voor één regel kan worden gebruikt. De waarde van 200 px in het voorbeeld is willekeurig gekozen. Elke waarde groter dan de lettergrootte van de tekst kan worden gebruikt.

Een afbeelding centreren met lijnhoogte

Wat als de inhoud een afbeelding is? Zal bovenstaande methode werken? Het antwoord ligt in nog een regel CSS.

HTML:

CSS:

#parent (regelhoogte: 200px;) #parent img (verticaal uitgelijnd: midden;)

De eigenschapswaarde van de regelhoogte moet groter zijn dan de hoogte van de afbeelding.

CSS-tabellenmethode

Er werd hierboven vermeld dat de eigenschap vertical-align van toepassing is op tabelcellen, waar het geweldig 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 (display: table;) #child (display: table-cell; vertical-align: middle;)

We stellen de uitvoer in tabelvorm in voor de bovenliggende div en de geneste div wordt uitgevoerd als een tabelcel. Nu kunt u de eigenschap vertical-align op de binnencontainer gebruiken. Alles erin wordt verticaal gecentreerd.

In tegenstelling tot de bovenstaande methode, kan in dit geval de inhoud dynamisch zijn, omdat het div-element wordt aangepast aan de inhoud.

Het nadeel van deze methode is dat deze niet werkt in oudere versies van IE. We moeten 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 gecentreerde element een hoogte krijgt.

De voorbeeldcode voert tegelijkertijd horizontale en verticale centrering uit:

HTML:

CSS:

#ouder (positie: relatief;) #child (positie: absoluut; boven: 50%; links: 50%; hoogte: 30%; breedte: 50%; marge: -15% 0 0 -25%;)

Eerst stellen we het type positionering van de elementen in. Stel vervolgens voor de geneste div de eigenschappen boven en links in op 50%, het midden van de bovenliggende. Maar de linkerbovenhoek van het geneste element is gecentreerd. Daarom moet je het optillen (halve hoogte) en naar links verplaatsen (halve breedte), en dan valt het midden samen met het midden van het bovenliggende element. Kennis van de hoogte van het element is in dit geval dus noodzakelijk. Stel het element vervolgens in op negatieve boven- en linkermarges die gelijk zijn aan respectievelijk 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:

#ouder (positie: relatief;) #child (positie: absoluut; boven: 0; onder: 0; links: 0; rechts: 0; breedte: 50%; hoogte: 30%; marge: automatisch;)

Het idee achter deze methode is om het geneste element uit te rekken tot alle 4 de randen van het bovenliggende element door de eigenschappen boven, onder, rechts en links in te stellen op 0.

Als u dit instelt om aan alle kanten automatisch marges te vormen, worden aan alle 4 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 boven- en ondermarges

Deze methode stelt expliciet gelijke marges in boven en onder het bovenliggende element.

HTML:

CSS:

#ouder (opvulling: 5% 0;) #kind (opvulling: 10% 0;)

De voorbeeld-CSS-code stelt de boven- en ondermarges voor beide elementen in. Voor een genest element zal het instellen van de opvulling dienen voor verticale centrering. En de opvulling van het bovenliggende element centreert het geneste element erin.

Relatieve eenheden worden gebruikt om het formaat van items dynamisch te wijzigen. En voor absolute eenheden zullen berekeningen moeten worden uitgevoerd.

Als het bovenliggende element bijvoorbeeld 400 px hoog is en het geneste element 100 px, dan zijn boven- en ondermarges van 150 px vereist.

150 + 150 + 100 = 400

Door% te gebruiken, kunnen de berekeningen aan de browser worden overgelaten.

Deze methode werkt overal. Het nadeel is de noodzaak van berekeningen.

Opmerking: Deze methode werkt door de buitenste opvulling van een element in te stellen. U kunt ook marges gebruiken binnen een element. De beslissing om marges of opvulling te gebruiken, moet worden genomen afhankelijk van de specifieke kenmerken van het project.

Drijvende duik

Deze methode gebruikt 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 (height: 250px;) #floater (float: left; height: 50%; width: 100%; margin-bottom: -50px;) #child (clear: both; height: 100px;)

We verschuiven de lege div naar links of rechts en stellen de hoogte in op 50% van het bovenliggende element. Op deze manier zal het de bovenste helft van de ouder vullen.

Omdat deze div zwevend is, wordt deze verwijderd uit de normale stroom van het document en moeten we de tekstterugloop voor het geneste element annuleren. Het voorbeeld gebruikt clear: both, maar het is voldoende om dezelfde richting te gebruiken als de offset van het zwevende lege div-element.

De bovenrand van het geneste div-element bevindt zich direct onder de onderrand van het lege div-element. We moeten het geneste element met de helft van de hoogte van het zwevende lege element omhoog verplaatsen. Om het probleem op te lossen, gebruikt u een negatieve waarde voor de eigenschap 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 hen geschikt is voor alle gevallen. U moet het project analyseren en het project kiezen dat het beste bij de vereisten past.

Heel vaak is de taak om het blok uit te lijnen met het midden van de pagina / het scherm, en zelfs zonder een javascript, zonder harde maten of negatieve marges in te stellen, zodat de schuifbalken voor de ouder werken als het blok groter is dan de grootte . Er zijn veel monotone voorbeelden op het web van hoe je een blok uitlijnt met het midden van het scherm. In de regel zijn de meeste gebaseerd op dezelfde principes.

Hieronder staan ​​de belangrijkste manieren om het probleem op te lossen, met 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 bij de aangegeven links te verkleinen.

Optie 1. Negatieve inspringing.

Bovenliggend (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-width: 100%; height: auto; display: block; margin: 0 auto; border: none;))

Optie 2. Automatisch inspringen.

Bovenliggend (breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0; links: 0; overloop: auto;) .block (breedte: 250px; hoogte: 250px; positie: absoluut; boven: 0; rechts: 0; bottom: 0; left: 0; margin: auto; img (max-width: 100%; height: auto; display: block; margin: 0 auto; border: none;))

Optie 3. Tafel.

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

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

Optie 4. Pseudo-element.

Bovenliggend (breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0; links: 0; overloop: auto; witruimte: nurap; tekstuitlijning: midden; lettergrootte: 0; &: voor ( hoogte: 100%; weergave: inline-blok; verticaal uitgelijnd: midden; inhoud: "";)) .blok (weergave: inline-blok; witruimte: normaal; verticaal uitgelijnd: midden; tekstuitlijning: links ; img (weergave: blok; rand: geen;))

Of, als u wilt dat de bovenliggende pagina alleen de hoogte en breedte van het venster beslaat, en niet de hele pagina:

Parent (positie: vast; boven: 0; rechts: 0; onder: 0; links: 0; overloop: auto; witruimte: nurap; tekstuitlijning: midden; lettergrootte: 0; &: voor (hoogte: 100%; weergave: inline-blok; verticaal uitgelijnd: midden; inhoud: "";)) .block (weergave: inline-blok; witruimte: normaal; verticaal uitgelijnd: midden; tekst uitlijnen: links; img (weergave: blok; rand: geen;))

Optie 5. Flexbox.

Bovenliggend (breedte: 100%; hoogte: 100%; positie: vast; boven: 0; links: 0; weergave: flex; align-items: center; align-content: center; uitvulinhoud: center; overflow: auto; ) .block (achtergrond: # 60a839; img (display: blok; rand: geen;))

Optie 6. Transformeren.

Bovenliggend (breedte: 100%; hoogte: 100%; positie: vast; boven: 0; links: 0; overloop: auto;) .block (positie: absoluut; boven: 50%; links: 50%; transform: translate ( -50%, -50%) img (display: blok;))

Optie 7. Knop.

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

Bonus

U kunt de afbeelding ook in het midden uitlijnen, en als de afbeelding groter is ouder, schaal het zodat het past ouder.
Voorbeeld: jsfiddle.net/serdidg/nfqg9rza/3.
Voorbeeld met een grote afbeelding:

In CSS zijn sommige schijnbaar eenvoudige dingen niet gemakkelijk te bereiken. Een van deze dingen is uitlijning, d.w.z. wanneer een element op een bepaalde manier moet worden gepositioneerd ten opzichte van een ander.

Dit artikel presenteert enkele kant-en-klare oplossingen die het werk van centreerelementen horizontaal en / of verticaal zullen helpen vereenvoudigen.

Let op: onder elke oplossing staat een lijst met browsers met een indicatie van de versies waarin de opgegeven CSS-code werkt.

CSS - Een blok centreren

1. Lijn een blok uit met het midden van een ander. In dit geval hebben de eerste en tweede blokken dynamische afmetingen.

Parent (positie: relatief;) .child (positie: absoluut; links: 50%; top: 50%; -webkit-transform: translate (-50%, -50%); -moz-transform: translate (-50% , -50%); -ms-transform: vertalen (-50%, -50%); -o-transform: vertalen (-50%, -50%); transformeren: vertalen (-50%, -50%) ;)

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Lijn een blok uit met het midden van een ander. In dit geval heeft het tweede blok vaste afmetingen.

Parent (positie: relatief;) .child (positie: absoluut; links: 50%; boven: 50%; / * 2 blokken breedte en hoogte * / breedte: 500px; hoogte: 250px; / * Waarden worden bepaald op basis van zijn 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. Lijn een blok uit met het midden van een ander. In dit geval heeft het tweede blok afmetingen die als percentage zijn gespecificeerd.

Parent (positie: relatief;) .child (positie: absoluut; / * breedte en hoogte van 2 blokken in% * / hoogte: 50%; breedte: 50%; / * De waarden worden bepaald op basis 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. Uitlijning van een blokelement (weergave: blok) ten opzichte van een ander (waarin het zich bevindt) horizontaal:

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. Een inline (display: inline) of inline-block (display: inline-block) element horizontaal uitlijnen:

Bovenliggende (tekstuitlijning: midden;) .kind (weergave: inline-blok;)

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 één element (display: inline, display: inline-block) ten opzichte van het andere (waarin het zich bevindt) in het midden. Het bovenliggende vak in dit voorbeeld heeft een vaste hoogte, die wordt ingesteld met behulp van de CSS-eigenschap line-height.

Bovenliggende (regelhoogte: 500px;) .child (weergave: inline-blok; verticaal uitlijnen: 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 centreren ten opzichte van het andere door het bovenliggende blok weer te geven als een tabel en het kind als de cellen van deze tabel.

Bovenliggende (weergave: tabel;) .child (weergave: tabelcel; verticaal uitlijnen: 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 uitlijningsoplossingen kent, deel ze dan in de reacties.