Vilket gör att du automatiskt kan rikta in alla objekt/lager till bildens mitt eller dess kanter med hundra procents noggrannhet. Du kan också justera i förhållande till ett specifikt område i bilden. Allt detta är väldigt enkelt och kommer att diskuteras i den här artikeln.
Som regel utför nybörjare denna operation med ögat, vilket inte alls är nödvändigt. Välj ett verktyg Rör på sig och uppmärksamma det. Det finns ett antal inställningar som är ansvariga för denna uppgift ( titta på skärmdumpen):
De tre första knapparna är ansvariga för vertikal justering (från vänster till höger): by överkant, i mitten, längs den nedre kanten.
De följande tre knapparna är ansvariga för horisontell justering (från vänster till höger): vänster, mitten, höger.
För att placera ett objekt exakt i mitten måste du alltså välja vertikal och horisontell centrering.
Den viktigaste regeln för justering: först och främst måste du berätta för Photoshop det område i förhållande till vilket programmet ska leta efter kanterna eller mitten. Tills du gör detta kommer justeringsknapparna att vara inaktiva, vilket innebär att de inte kan klickas.
Detta är hemligheten med hur man gör ett objekt i mitten av hela bilden eller dess separata fragment.
Så sekvensen av åtgärder är som följer:
Låt oss säga att du måste centrera den här bilden:
Steg 1
Vi anger för Photoshop det område i förhållande till vilket programmet ska rikta in bilden. Detta görs genom att skapa en .
Välj i lagerpaletten bakgrundslager och tryck på tangentkombinationen Ctrl+A ( Välj alla). Som ett resultat bör du se en urvalsram från "marschmyror" runt bakgrundslagret. (Som regel har bakgrundslagret samma storlek som duken).
Notera
Du kan välja bakgrundslagret på ett annat sätt - håll nere Ctrl-tangenten och vänsterklicka på bakgrundslagret. Metoden fungerar när detta lager är upplåst (detta indikeras av hänglåsikonen).
Steg 2
Nu måste du välja ett verktyg Rör på sig. När vi har en urvalsram blir justeringsknapparna aktiva, vilket betyder att de kan användas.
Välj lagret med bilden som du vill justera och klicka nu på knapparna i enlighet med var du vill placera bilden. Låt oss till exempel placera den exakt i mitten. Då måste vi klicka på dessa knappar:
Ett annat exempel. Låt oss säga att du måste placera bilden i mitten, men på vänsterkanten. Välj sedan följande knappar i alternativfältet:
Låt oss säga att det finns ett fragment i bilden, inuti vilken du måste placera en bild helt jämnt. I mitt exempel lade jag till en glasruta. Låt det finnas en annan bild inuti den ( Förresten, du kan lära dig hur man gör en sådan glasruta själv).
Steg 1
Först och främst, i analogi med det första alternativet, måste du välja detta fragment. Hur gor man det har?
— Om det här fragmentet finns på ett separat lager (som min kvadrat, som jag infogade separat), måste du klicka Ctrl och klicka på lagrets miniatyrbild om den inte är låst).
— Om det här fragmentet finns i själva bilden måste du välja urvalsverktygen Rektangulär och Ovalt område och använd dem för att rita ett jämnt, markerat område runt fragmentet. Hur man använder dessa verktyg. Rör på sig och, håll nere Skift-tangenten, klicka på riktningspilarna på tangentbordet. Bilden kommer att flyttas i steg om 10 pixlar.
Om du inte håller ned den här tangenten, utan bara använder tangentbordspilarna, kommer bilden att flyttas i steg om 1 pixel.
Om du märker ett fel i texten markerar du det och trycker på Ctrl + Enter. Tack!
Funktioner: Inställningar: Användning: Skärmdumpar: Var man kan ladda ner ELinks är ett försök att skapa en modern textbaserad webbläsare. Projektet startade från länkens webbläsarkod. Hans mål till en början var att försöka implementera flera funktioner som mer eller mindre saknas/svaga i länkar. Var kommer "E" i "ELänkar" ifrån - "Experimentell" / "Experimentell". Efter framgången med dessa ansträngningar kom "E" att förstås som "Utökad" eller "Förbättrad". När webbläsaren Links nådde en viss mognadsgrad, överlägsen i vissa avseenden den då mest avancerade webbläsaren Lynx, stod dess vidareutveckling vid ett vägskäl: att gå mot grafikvisning och vidare. klar text eller främja webbsurfning med hjälp av textgränssnitt användaren över de gränser som först nås av Lynx och sedan av länkar - medan han är kvar i textläge. Den första riktningen implementerades i versionen av Länkar som kan visa grafiskt innehåll på webbsidor - Länkar2. Den andra är ELinks webbläsare. Lynx var och förblir en mycket välutvecklad modell programvara av sitt eget slag. Dess författare utarbetade och implementerade ett mycket genomtänkt och grundligt koncept för textbaserad webbsurfning, med speciella abstraktioner och konventioner som hjälpte till att övervinna många av begränsningarna och nackdelarna med textbaserad webbsurfning och skapade en värld så annorlunda än den snabbt expanderande grafiska delen av Internet. Men HTML och datorer utvecklades ytterligare, skriptspråk började spridas, hela världen av att presentera, hitta och konsumera information gick framåt och förändrades. Nya möjligheter har dykt upp. Många av dessa funktioner har implementerats i Links, men följande ändringar i visuell representation information i webbdokument – från mer HTML till mer CSS – har öppnat nya vägar; även när du är kvar i textläge. Och de försöker implementera detta i ELinks: stöd för färgdisplay i terminalemulatorer som stöder den här funktionen, lite positionering med använder CSS och även några JavaScript-stöd/ECMAScript. Teknisk sida nätverkstekniker(som SSL-stöd) och support olika kodningar texten var redan ganska robust i webbläsaren Links, men i ELinks har vissa funktioner förbättrats och andra mer utvecklade. ELinks är ett steg framåt i konsolens webbläsarkoncept, vilket gör ELinks till det mest avancerade exemplet på dess implementering. Även om Lynx fortfarande håller sin position ganska bra. Dess koncept med att visa webbsidor i textläge, även om det är en förenkling, fungerar ett speciellt tillvägagångssätt för att presentera och hantera information, snarare än att försöka likna miljön med grafiska webbläsare, ganska bra. Webbdokument blir mer och mer sofistikerade och (med alla de oundvikliga begränsningarna för att visa webbsidor i textläge) följer en viss väg när det gäller att hantera dem på ett sätt som rivalerna försöker vara som vanliga, grafiska, fullfjädrade webbläsare. stationära datorer. Detta liknar webbläsarens dilemma för Mobil enheter dröm stora displayer: Försök att imitera datorer med stora skärmar eller omvandla de visade webbdokumenten så att de passar miljöns egenskaper. Text webbläsare används mest på datorer med mer eller mindre stora skärmar, så det finns färre storleksbegränsningar och fler frestelser: Lynx att förbli diskret, ELinks att gå över gränserna. Möjligheter Text webb webbläsare. Versioner för Linux, andra *nix-system, Windows, DOS, OS/2, BeOS och några andra. HTML (inklusive tabeller och ramar). Mycket begränsad CSS och JavaScript (mer information). Stöd färgpalett i 16, 88 eller 256 färger på terminalemulatorer/konsoler som stöder denna funktion. Stöd för flikar, bakgrundsnedladdningar med avisering när nedladdningen är klar. Stöd för mus. Redigera textfält i webbsidor i en extern textredigerare. URL-genvägar. Stöd för skript i Perl, Lua, Guile, Ruby.
Imapsync. Överför post
Överför e-post från en IMAP-server till en annan med imapsync [ 1 ] / Linux, kommandorad: imapsync —host1 imap.this.com —user1 [e-postskyddad]--passfil1 /hem/användare/imap/lösenordsfil1 --ssl1 --host2 imap.another.com --användare2 [e-postskyddad]—passfile2 /home/user/imap/passwordfile2 —ssl2 —skipsize —allowsizemismatch — Det finns en webbplats example.com och en brevlåda [e-postskyddad] på servern hos ett visst webbhotell. IMAP-server: imap.this.com. IMAP-servern stöder SSL. — Webbplatsen example.com håller på att överföras till en annan värd. Följaktligen, och brevlåda [e-postskyddad] med allt dess innehåll och bibehålla mappstrukturen. IMAP-server från en annan värdleverantör: imap.another.com. IMAP-servern stöder SSL. 1. Skapa en brevlåda [e-postskyddad] och lösenordet för det på servern hos värdföretaget där överföringen sker. 2. Skapa två textfil i mappen /home/user/imap/: passwordfile1 med brevlådans lösenord på den första IMAP-server och lösenordsfil2 med lösenordet för brevlådan på den andra IMAP-servern. 3. chmod 600 /home/user/imap/passwordfile1 4. chmod 600 /home/user/imap/passwordfile2 5. Installera imapsync 6. Kör imapsync med lämpliga parametrar och data Imapsync överför e-post samtidigt som mappstrukturen från imap.this bibehålls .com på imap.another.com. SSL används för att kryptera data under överföring, och lösenord lagras i filer som skyddas genom att ställa in behörigheter till chmod 600. Överför e-post mellan två tjänster E-post kan kräva användning ytterligare parametrar[2] imapsync. Till exempel, när du överför innehållet i en Gmail.com-postlåda till en annan måste du ange "—port1" och "—port2": imapsync —host1 imap.gmail.com —port1 993 —användare1 [e-postskyddad]—passfil1 /home/user/imap/passwordfile1 —ssl1 —host2 imap.gmail.com —port2 993 —användare2 [e-postskyddad]—passfile2 /home/user/imap/passwordfile2 —ssl2 —skipsize —allowsizemismatch [ 1 ] Ett enkelt och vanligt fall: innehållet i en e-postlåda överförs till en annan, tom, som finns på en annan server. Men det kan finnas fler svåra situationer: Gmail till Google appar E-postmigrering och flyttning till Google Apps med imapsync. [ 2 ] Andra alternativ: Migrera e-post från en server till en annan med imapsync och imapsync(1) - Linuxmanpage.
Bakgrund HTML-bild Lektion 10. CSS. Justera bilden mot mittenHTML-bild, infoga en bild i sidkoden
HTML-tagg som ansvarar för att visa bilden
- En HTML-bild kan vara vilken bild som helst i PNG-, JPEG- och GIF-format.
- HTML-koden för bilden bestäms av taggen.
- En HTML-bild kan vara bakgrunden till en webbsida.
- En HTML-bild kan definieras som en hyperlänk.
I mappen eller någon annan där du har filen, placera en bild med ett tillägg, säg, kalla det vad du vill, till exempel .
Infoga en bild i HTML-koden på sidan:
Tag - oparad. Var uppmärksam på hur den är stängd.
Attribut och värderingar
- - krävs, det anger källan till bilden.
- - definierar alternativ text, en kommentar som lyder sökrobot när man analyserar innehållet på en webbsida. Den måste också utses.
- - definierar bildens bredd i pixlar.
- - definierar bildens höjd i pixlar.
Vänligen ange verkliga storlekar- på så sätt bibehåller du den ursprungliga bildkvaliteten.
För webbutveckling Tre bildformat är tillämpliga: PNG (.png), JPEG (.jpg) och GIF (.gif). Adobe Photoshopär specialiserade medel om att skapa grafik för webbplatser. Den kan användas för att konvertera ett bildformat till ett annat.
HTML-bild | Horisontella och vertikala marginalereller det horisontella och vertikala avståndet mellan bilden och texten
Se resultatet i ett nytt fönster: Bakgrundsbild i HTML
Attribut behandlas i CSS-handledningar.
Infoga en bild och dess ordning → → se här.
HTML-bild - länk
Exempelkod:
Se resultatet i ett nytt fönster: HTML-bild centrerad på sidan
Vad behöver du vara uppmärksam på här? → För det första, det faktum att måtten är indikerade - detta påskyndar laddningen av bilden. För det andra specificeras attributen, vilket också är mycket önskvärt att göra även om det inte finns någon alternativ text. I det första fallet bestämdes centreringen av en HTML-parameter, och i det andra - med en linjär inkludering kaskadbord stilar.
Publiceringsdatum: oktober 2009 | Uppdatering: augusti 2014Lektion 9. HTML-bakgrund 
HTML-bild Lektion 11. HTML-bild och text
Har funnits länge olika metoder centrera bilder med CSS. Implementeringen av dessa metoder påverkades i hög grad av Internet Explorer 5. Men idag är få människor intresserade av den här versionen av webbläsaren, så du kan bli av med onödig kod.
Tidigare dikterade IE5 och IE5.5 sina egna regler - för att centrera ett sidelement måste du använda en CSS-egenskap. Och för att centrera till exempel en bild måste du placera den inuti ytterligare block:
Detta extra block tilldelas motsvarande CSS-egenskaper:
Allt detta var nödvändigt eftersom Internet Explorer femte versioner inte stöder en egenskap som redan existerade och som stöds av andra webbläsare marginaler, som automatiskt tilldelar samma avstånd till vänster och höger om elementet som justeras. Ovanstående metod används fortfarande.
Men IE5 och IE5.5 är redan ett minne blott, så HTML-koden kan göras enklare och mer elegant:
Frånvaron av onödiga ytterligare block uppnås tack vare lämplig CSS:
Egenskapen ger bilden karaktäristiken av ett blockelement, vilket eliminerar behovet av att använda en eller runt bilden. Deklarationen tilldelar sedan topp- och bottenstoppning nullvärde, och vänster och höger utfyllnad är automatiskt lika med samma värde, vilket riktar in bilden mot mitten.
Behöver du tilldela olika marginaler till toppen och botten? Inga problem. Glöm inte förkortningar:
Tyvärr, till skillnad från fall av att justera bilder till vänster och höger kanter (och), finns det ingen möjlighet standardmetoder linda text runt en centrerad bild. Naturligtvis, om det är mycket viktigt, så är det genomförbart.
Om bilden också är en länk, sträcker sig länkområdet till hela blockets bredd, oavsett bildens bredd. I vissa fall är detta en nackdel.
Justeringsmetoden som beskrivs ovan är mest lämplig för webbplatser som använder bilder i text (nyheter, artiklar). För fotogallerier finns det naturligtvis egna, mer sofistikerade sätt att anpassa bilder.
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Rikta in fotot och bildtexten horisontellt på webbsidan.
LösningIllustrationer som åtföljer text är ofta centrerade på webbsidan, med texten före och efter bilden. Detta arrangemang av element låter dig bryta stor text på semantiska block och uppmärksamma ritningarna.
Låt oss först titta på att rikta in bilden mot mitten. För att göra detta, lägg till en stil till P-väljaren text-align egenskap med värdecentrum. I det här fallet taggen måste placeras inuti ett stycke (tagg
). För att förhindra att alla stycken på sidan blir mittjusterade, låt oss presentera vår fikonklass och utföra alla åtgärder med den. Exempel 1 visar hur du gör detta.
Exempel 1: Använda text-align
HTML5CSS 2.1IECrOpSaFx
Resultat detta exempel visas i fig. 1.
Ris. 1. Bild centrerad på webbsidan
Du kan också lägga till en bildtext till fotot. Texten ska placeras omedelbart efter bilden och centreras på liknande sätt. Allt är enkelt här, låt oss använda vår klass igen, men applicera det på taggen. För att göra signaturtexten annorlunda i utseende från vanliga stycken, gör den kursiv och markera den i en annan färg (exempel 2).
Exempel 2. Bildtext
HTML5CSS 2.1IECrOpSaFx
Resultatet av detta exempel visas i fig. 2.
2. Signatur under bilden
För ett block med ett foto används taggen och för dess bildtext används taggen. Äldre versioner av IE förstår inte dessa taggar, så ett litet skript läggs till specifikt för dem.
Bildcentrerad CSSWindows: Internet Explorer 6.0+, Firefox 1.0+, Google Chrome, Opera 5.0+ [1], Safari 3.1+, SeaMonkey 1.0+ [2].
Linux: Firefox 1.0+, Google Chrome/Chromium, Opera 5.0+, SeaMonkey 1.0+ [3], NetSurf 2.6+, Hv3.
Horisontell mittjustering av en bild med CSS. Exempel:
HTML/XHTML. Koda:
.example (position: relativ; vänster: 0px; topp: 0px; höjd: auto; bredd: 100%; float: vänster; utfyllnad: 10px; kant: 1px #ccc solid; bakgrund: #fafafa;)
.example img (display: block; margin: 0 auto;)
CSS-egenskaper en behållare (i I detta fall exempel ) kan vara väldigt olika, bildens mittjustering skapas med hjälp av stilar som är direkt relaterade till bilden: .example img (display: block; margin: 0 auto;).
Aliosque subditos och tema
Bildcentrerad CSS
Horisontell mittjustering av en bild med CSS. Exempel: HTML/XHTML.
Justera bilden efter HTML-center och CSSKoda: CSS. Kod: .exempel (position: relativ; vänster: 0px; topp: 0px; höjd: auto; bredd: 100%; flytande: vänster; utfyllnad: 10px; kant: 1px #ccc solid; bakgrund: #fafafa;) .example img (display: block; margin: 0 auto;) CSS-egenskaperna för behållaren (i det här fallet, exempel) kan vara mycket olika centerjustering av bilden skapas med hjälp av stilar som är direkt relaterade till bilden: .example img (display: block; ; marginal: 0 auto;).
[ 1 ] Och även i Opera 4.0+, om stenografiska CSS-egenskaper inte används. Det vill säga om CSS-koden är i formen .example img (display: block; margin-left: auto; margin-right: auto;). [2] Och även i Netscape 6.01+, Mozilla 0.6+. [3] Och även i Netscape 6.01+, Mozilla 0.6+.
E-länkar. Användande
Gå till sidor: ELinks - Text- eller konsolwebbläsare. Beskrivning: funktioner, skärmdumpar, var man kan ladda ner. E-länkar. Installation - Hur man ställer in ELinks. Genom att köra ELinks kan du göra nästan allt den kan genom att använda dess menyer. Så det som följer handlar bara om hur man kör ELinks och till exempel hur man gör några andra saker. 1) Hur man kör ELinks - ELinks kan köras i en miljö med grafiskt gränssnitt(X Windows, MS Windows, etc.) eller med gränssnitt kommandorad. I det första fallet måste terminalemulatorn/konsolen först startas: xterm, rxvt, Win32-konsolen och andra: ELinks (Linux) - För att starta ELinks, skriv in kommandot: elinks - För att starta ELinks, som öppnar ett webbdokument från Internet: elinks Web -webbdokumentadress - För att starta ELinks-åtkomst hårddisk för att visa lokala mappar: elinks file:/// eller: elinks / - För att starta ELinks, öppna lokal mapp: elinks file:///home/user1/ eller: elinks /home/user1/ - För att starta ELinks, öppna lokal fil: elinks file:///home/user1/document1.htm eller: elinks /home/user1/document1.htm ELinks (Windows) - För att starta ELinks, skriv in kommandot: elinks - För att starta ELinks, som öppnar ett webbdokument från Internet: elinks webbadress för webbdokumentet - För att starta ELinks som kommer åt hårddisken för att visa lokala mappar: elinks file:/// - För att starta ELinks öppna en lokal mapp: elinks file://c/home/user1 / — Till starta ELinks, öppna en lokal fil: elinks file://c/home/user1/document1.htm 2) För att komma åt ELinks-menyn: Tryck Esc på tangentbordet 3) För att öppna ett webbdokument i en ELinks som redan körs: Tryck på g på ditt tangentbord eller Esc -> Arkiv -> Gå till URL -> [ Ange webbadress ] -> Enter 4) Gå tillbaka: Vänsterpiltangent på ditt tangentbord eller Esc -> Arkiv -> Gå tillbaka 5) Öppna länken i ny bakgrundsfliken: Skift - t eller Esc -> Länk -> Öppna i ny flik i bakgrunden 6) Gå till nästa flik: Shift -> eller Esc -> Visa -> Nästa flik 7) Stäng en flik: Tryck på c på tangentbordet eller Esc -> Visa -> Stäng flik 8) Pass URI extern applikation när ELinks körs i en terminalemulator.
Datum: 2010-09-07
I ett HTML-dokument justeras bilderna horisontellt, vertikalt och centrerat.
Horisontell bildjusteringAnvänd attributet align="" för att styra bilden horisontellt.
Justera bilder till mitten i HTMLAnge vänster i dess värde om du vill justera bilden mot sidans vänstra kant, eller höger om du vill justera den mot högerkanten. Som standard är bilden alltid justerad mot sidans vänstra kant:
Med samma attribut align="" kan du styra bildens vertikala position. För att göra detta måste du ange toppen i dess värde för att justera längs den övre gränsen, mitten - i mitten och botten - längs den nedre gränsen:
Obs: posten images/photo.jpg betyder att bilden inte finns i en katalog, utan i mappen bilder.
Justera en bild till mitten av sidanDessutom kan bilden centreras. För att göra detta, slå in bildtaggen i en parad tagg:
1.1 Introduktion till html
1.2 HTML-dokumentstruktur
2.1 Stycke i html
2.2 Rubriker i html
2.3 Citat och kommentarer i html
2.4 Whitespace och Wrap Tags i HTML
3.1 Numrerad lista html
3.2 Punktlista
3.3 Kapslade listor
4.1 HTML-markering text
4.2 Teckensnitt och teckenstorlek
4.3 Ändra textfärg i html
4.4 Sidkanter och bakgrund
5.1 Infoga en bild på sajten
UppgiftRikta in fotot och bildtexten horisontellt på webbsidan.
LösningIllustrationer som åtföljer text är ofta centrerade på webbsidan, med texten före och efter bilden. Detta arrangemang av element låter dig dela upp stor text i meningsfulla block och dra uppmärksamhet till bilderna.
Låt oss först titta på att rikta in bilden mot mitten. För att göra detta, lägg till en text-align style-egenskap med värdecentrum till P-väljaren. I det här fallet taggen måste placeras inuti ett stycke (tagg
). För att förhindra att alla stycken på sidan blir mittjusterade, låt oss presentera vår fikonklass och utföra alla åtgärder med den. Exempel 1 visar hur du gör detta.
Exempel 1: Använda text-align
HTML5 CSS 2.1 IE Cr Op Sa Fx
Centrera fotot .fig ( text-align: center; /* Centrera */ )
Text före bild
Text efter bild
Resultatet av detta exempel visas i fig. 1.
Ris. 1. Bild centrerad på webbsidan
Du kan också lägga till en bildtext till fotot. Texten ska placeras omedelbart efter bilden och centreras på liknande sätt. Allt är enkelt här, låt oss använda vår klass igen, men applicera det på taggen. För att göra signaturtexten annorlunda i utseende från vanliga stycken, gör den kursiv och markera den i en annan färg (exempel 2).
Exempel 2. Bildtext
HTML5 CSS 2.1 IE Cr Op Sa Fx
Foto med bildtext .fig (visa: block; /* Blockelement (för äldre webbläsare) */ text-align: center; /* Center alignment */ font-style: italic; /* Kursiv */ margin-top: 0; /* Top margin */ margin-bottom: 5px /* Bottom margin */ color: #666; /* Caption color */ ) document.createElement("figur"); document.createElement("figcaption"); 
Grottman gör eld. Men vad är den där månytan i bakgrunden? Nej, det är inte så enkelt.
Resultatet av detta exempel visas i fig. 2.
Ris. 2. Signatur under bilden
För ett block med ett foto används taggen och för dess bildtext används taggen. Äldre versioner av IE förstår inte dessa taggar, så ett litet skript läggs till specifikt för dem.
Hej kära läsare av min sida. Idag ska jag berätta hur du centrerar bilder på din webbplats.
Först lite teori så att ni alla förstår var benen kommer ifrån. Faktum är att - Det här inline-element och det skulle vara mer korrekt att justera det med hjälp av align-attributet, MEN! Som vi vet, ju fler attribut vi stoppar in i webbplatskoden, desto svårare blir det för oss att hantera utseende. Du måste hela tiden leta efter dessa attribut och korrigera dem.
I själva verket, för att förenkla vårt designarbete, uppfanns ett stilmarkeringsspråk som heter Css. Och om du kan göra allt mycket enklare, varför inte dra nytta av det? De har ju för länge sedan kommit på mer enkla sätt upprätta dokumenten för en webbresurs och det vore dumt att ignorera den och inte tillämpa den.
Nåväl, åt helvete med texterna, låt oss börja klura ut det.
Låt oss först skapa en testmapp. Jag lägger in index.html, style.css (fil med stilar) och en bildfil där. Låt oss sedan skapa "skelettet" för vår webbplats i indexfilen:
I Css-justering element utförs som regel med hjälp av marginalegenskaper. Men det fungerar bara för blockelement. Som jag redan sa, - gemener element. Hur kan vi få vår bild att se blockig ut?
Det finns en magisk visningsegenskap för detta, som har många värden som låter dig berätta för webbläsaren hur man uppfattar vissa sidelement. Som standard är elementet display:inline;, vilket betyder att den här är inline. Men i Css kan vi ändra presentationen av det eller det elementet. Genom att skriva display:block säger vi det till webbläsaren detta element måste behandlas som en blockfil. Detta är vad vi kommer att skriva i vår stilfil.
Därefter måste vi specificera vår marginal. Dess värde ska vara "0 auto". Det kommer alltså inte att finnas någon indragning i toppen och botten, och värdet "auto" betyder att indraget längs kanterna kommer att beräknas av webbläsaren med sin egen formel. Jag förstår inte webbläsarens beräkningar bra, men jag antar att det verkar som att det inte finns några specifika indrag till vänster och höger, men den är inställd på auto. Om auto är en variabel är auto till höger lika med auto till vänster. Så det visar sig att webbläsaren skjuter upp två identiska avstånd.
Därmed lyckades vi css-fil följande:
På så sätt får vi en bild i mitten.
Det är värt att tillägga att om elementet inte har en fast bredd, måste det tvingas! Annars kommer elementet inte att centreras.
Det är allt. Lycka till med din layout!
P.S: Som du säkert redan gissat är alla bilder med detta material inriktad på exakt detta sätt.
