I denna handledning kommer vi att se hur man centrerar bilder med HTML och CSS. Det är inte alls komplicerat och vi kommer att behöva det ofta för våra webbsidor. Vi kommer att se några alternativ, ett som vi bara använder HTML, ett annat genom användning av CSS och slutligen med Bootstrap.
HTML och CSS är två ledande webbskriptspråk i världen för att skapa webbsidor och applikationer. Båda språken arbetar tillsammans för denna uppgif.webpt. Medan HTML ger en struktur till webbsidor, tar CSS hand om stilen och den visuella eller hörseldelen. HTML tillhandahåller taggar som omsluter de olika elementen på en sida och på så sätt kommer vi tillsammans med attribut att skapa skelettet på vår webbplats.
Skillnader mellan HTML och CSSFör att sammanfatta kan vi se skillnaderna mellan HTML och CSS som följande:
- HTML är lättare att lära sig och implementera
- HTML Tillgängligt på flera språk
- HTML är lätt och effektivt
- HTML har begränsad säkerhet
- HTML är något långsamt.
- CSS har ett större bibliotek med attribut och stilar än CSS
- CSS förbättrar sidladdningstiden.
- CSS har stor kompatibilitet och enkelt underhåll.
- CSS ger några prestandaproblem
- CSS har ingen inbyggd säkerhet
Det rekommenderas idag att utföra stegen direkt med CSS men om du har mer HTML kan du också ha följande alternativ.
1. Hur man centrerar bilden på webbsidan med endast HTML
Även om vi gör dessa alternativ för att centrera bilden med HTML kommer vi att se två sätt att göra det enkelt.
Mittbild med HTML och mitttaggI det här enkla alternativet räcker det att slå in bilden med de mittersta etiketterna
- "Src" -delen används för att ange bildens sökadress.
- Alt -delen ger information till webbsidan om namnet på bilden.
Dessutom måste vi tilldela bildens höjd och bredd så här:
höjd = ”250” ”
Mittbild med HTML och mittenMen när det gäller bilder skiljer sig detta koncept av centrum som vi har sett och det är bättre att använda en mittlinje, så koden förblir följande:
Om vi också lägger till text skulle vi ha den här koden:
Detta exempel kommer att vara att centrera en bild med text i HTML.
Justera bilden till HTML med align -attributetOm vi vill justera en bild horisontellt kan vi göra det på ett liknande sätt som vi gör med text, det vill säga använda justeringsattributet inom etiketter
eller. Vi skapar koden där attributet visas med bildtaggen. Etiketten är en av dem som accepterar align -attributet men användningen är annorlunda.
Men som vi säger, etiketten
Här skulle vi lägga texten som skulle fylla hela den högra delen och linda in bilden som vi har placerat. Vi fortsätter att fylla i texten solvetic solvetic solvetic
Vi kommer att göra detsamma för att anpassa texten och bilden till höger till vänster, men ersätta "vänster" med "höger".
Det rekommenderas inte, eftersom placerings- och stilaspekterna bör överlåtas till CSS och inte användas direkt i HTML. På detta sätt kommer vi att ha en kod som är lättare att underhålla och ändra, men om du vid något tillfälle behöver den för ett litet och snabbt test är det värt att veta.
2. Hur man centrerar en bild på en webbsida med CSS
Här kommer vi att ha HTML -kod och CSS -kod. Vi börjar med att titta på HTML.
Vi har lagt en klass till bilden, kallad centrerad, och det hjälper oss att senare utforma den i CSS. Nedan är koden för att centrera bilden.
.center {marginal: 10px auto; display: block; } Vi kan också använda följande kod för att anpassa en bild med hjälp av CSS för vår webbsida:
.center {margin-left: auto; marginal-höger: auto; }Om detta inte fungerar för dig i en webbläsare eftersom textcentreringsmetoden används måste vi ange för webbläsaren att bilden är ett element på blocknivå. På så sätt kan vi centrera det som om det vore ett annat block. Vi kommer att använda den här koden:
Vi får elementet att visas som ett block, och vi ger det en automatisk marginal (det räcker att marginalen är automatisk på sidorna, upp och ner kan du lägga vad du vill). Tänk på att om bilden upptar hela bredden kommer den inte att centreras.
img.center {display: block; marginal-vänster: auto; marginal-höger: auto; }
3. Hur man centrerar en bild på en webbsida med Bootstrap
Med denna populära ram är allt enklare, vi måste bara sätta center-block-klassen i bilden.
Du måste ladda ner Bootstrap och länka den eller lägga ditt CDN i vår HTML, för detta lämnar jag din länk nedan:
Vi kan se resultatet av att tillämpa dessa koder med en bild nedan:
På så sätt kan vi både centrera våra bilder i HTML och använda CSS och därmed göra estetiskt mer framgångsrika webbverk.
