Hoe Center een afbeelding met CSS



Als u centreren van een afbeelding op uw webpagina's wilt, is het eenvoudig te doen met CSS. Hier zijn de eenvoudige stappen.

Wat die u nodig hebt

  • Een afbeelding te centreren
  • Een webpagina of blogbericht
  • Als u centreren van een beeld als die van de cowboys op paarden hierboven wilt, eerst uitzoeken wat uw CSS-selector zou moeten zijn. De selector voor een afbeelding is img. Echter, u kan niet wilt gebruiken deze selector alleen, want als je dat doet, elke afbeelding op uw pagina wordt gecentreerd. Gebruik een meer specifieke selector om slechts een enkele afbeelding of groep afbeeldingen centreren.

  • Hier is een scenario: u wilt centreren voorbeeldafbeeldingen in een zijbalk. Hebt u een div genaamd #sidebar en een klasse met de naam .preview voor de beelden en de koppelingen die u in de zijbalk maakt. Uw selector zou #sidebar .preview img. Deze selector selecteert een img-element dat is een afstammeling van een element met een class attribuut met de preview van het woord, die is een afstammeling van een element met een id attribuut die gelijk is aan de zijbalk. Uw specifieke situatie kan anders zijn, natuurlijk, maar proberen te komen met een selector die specifiek gericht is op alleen de afbeeldingen die u wilt centreren.

  • Controleer de img een block-level element. In het bovenstaande scenario zou dit de CSS-regel.

    zijbalk .preview img {}

    weergeven: blokkeren;
    }

  • Marge regels toevoegen waardoor zal het centrum van het beeld. In het bovenstaande scenario zou dit de volledige regel.

    zijbalk .preview img {}

    weergeven: blokkeren;
    margin-right: automobiel;
    margin-left: automobiel;
    }

  • De regel in stap 4 is alles wat die u nodig hebt; Zorg ervoor dat uw selector is specifiek genoeg om alleen de afbeeldingen die u centreren wilt.

Gerelateerde Artikelen

Hoe om een afbeelding met de vlek Tool genezing te corrigeren

Hoe om een afbeelding met de vlek Tool genezing te corrigeren

Hoe om een afbeelding met de vlek Tool genezing te corrigeren. Beeld het uitgeven softwareproducten, zoals Adobe Photoshop en GIMP zijn een aantal manieren artefacten en gebreken in een digitaal beeld te corrigeren. De helende Retoucheerpenseel in GI
How to Style van een afbeelding met CSS

How to Style van een afbeelding met CSS

How to Style van een afbeelding met CSS. Gebruik CSS om uw website beelden presenteren op de best mogelijke manier. In dit artikel leert u waar u een afbeelding en wel of niet opnemen van decoraties zoals randen.Wat die u nodig hebtEen basiskennis va
Hoe Center een beeld met behulp van HTML-website

Hoe Center een beeld met behulp van HTML-website

Een webpagina coder gebruikt Hypertext Markup Language te vertellen de webbrowser het functionele doel van elk element op een pagina, zoals een alinea, kop of lijst. Aangezien HTML 4, Cascading Style Sheets hebben geleverd de codeur met een manier om
Hoe Animate een achtergrond met CSS

Hoe Animate een achtergrond met CSS

Cascading Style Sheets, beter bekend als CSS, is een web ontwerp taal gebruikt in combinatie met HTML te instrueren webbrowsers hoe om een webpagina weer te geven. U kunt vele verschillende stijlelementen in CSS, met inbegrip van een achtergrondkleur
Hoe Center een formulier met behulp van Microsoft Access

Hoe Center een formulier met behulp van Microsoft Access

Wijzigen van de indeling van uw Microsoft Access kunt u formulieren effici├źnter te gebruiken hen. Microsoft Access bevat allerlei functies voor het aanpassen van uw database, met daarin opties voor het openen en weergeven van uw formulieren. In plaat
Hoe om een afbeelding met een zelfgemaakte Projector te vergroten

Hoe om een afbeelding met een zelfgemaakte Projector te vergroten

Het bouwen van een zelfgemaakte projector grotendeels met eenvoudige, huishoudelijke artikelen. Het maken van een zelfgemaakte projector is een leuke, educatieve project te doen met het hele gezin en kinderen zal verrukken op de verlichte en wonderli
Hoe Center een webpagina met FrontPage

Hoe Center een webpagina met FrontPage

Microsoft FrontPage is een programma dat wordt gebruikt om webpagina's en websites te ontwikkelen. Ontwerpers kunnen het maken van eenvoudige en uitgebreide webpagina's die tekst bevatten, beelden, video en geluid zonder kennis van programmeren. Stan
Hoe maak je een afbeelding met hyperlinks met behulp van Photoshop

Hoe maak je een afbeelding met hyperlinks met behulp van Photoshop

Wanneer u op een gedeelte van de afbeelding van een website en uw browser naar een andere webpagina springt, is een afbeelding met hyperlinks waarschijnlijk verantwoordelijk voor die actie. Ontwerpers van sites kunnen het schrijven van HTML-code waar
Hoe u een afbeelding koppelt aan een MP3-bestand met Windows Mediaplayer

Hoe u een afbeelding koppelt aan een MP3-bestand met Windows Mediaplayer

Windows Media Player kunt u illustraties toevoegen aan nummers en albums met behulp van de interface in uw mediabibliotheek. Door het aanbrengen van een afbeelding naar een liedje, kunt u illustraties telkens wanneer het liedje is geselecteerd of tel
Het verplaatsen van tekst rond een afbeelding met HTML of CSS

Het verplaatsen van tekst rond een afbeelding met HTML of CSS

Als u een afbeelding met de tekst op uw webpagina opneemt, wordt de afbeelding boven of onder de omringende inhoud, waardoor de witruimte links en rechts van de afbeelding in de standaardstijl weergegeven. Hiermee verspilt u ruimte en zorgt ervoor da
Hoe maak je een afbeelding met een transparante achtergrond in verf

Hoe maak je een afbeelding met een transparante achtergrond in verf

Veel beeldformaten gebruikt op websites hebben transparante achtergrond dat hetgeen achter hen zichtbaar is. Transparante afbeeldingen maken met native Microsoft-hulpprogramma's, kan echter moeilijk. In plaats daarvan het gebruik van vrije softwareop
How to Style een koppeling met CSS

How to Style een koppeling met CSS

Webpagina's hyperlinks bevatten veel eigenschappen die u kunt stijl. U kunt kleur, onderstreping, achtergrond en vele andere aspecten van het uiterlijk met CSS. Hier zijn een paar tips om je slag te gaan.Wat die u nodig hebtBasiskennis van de CSSBasi
Hoe textuur een plafond met de Hand

Hoe textuur een plafond met de Hand

Hoe textuur een plafond met de Hand. Een plafond met de hand texturing is vermoeiend werk, maar dramatische resultaten oplevert. Uw plafonds kunnen maken in het vet van een verklaring als uw wanden of meubels. Hier zijn een paar stappen maken te verb
Hoe minder een auto met Photoshop

Hoe minder een auto met Photoshop

Of u van plan bent te verlagen van uw auto's schorsing mechanismen voor betere behandeling of pure stijl esthetiek, kunt u een zeer nauwkeurige voorbeeld van hoe de wijziging eruit zou zien door een foto met behulp van Adobe Photoshop te bewerken.Ver