Kép központosítása HTML programozással

...

Használja a CSS-t a weboldal megjelenésének meghatározásához.

A weblapkódoló a Hypertext Markup Language segítségével tájékoztatja a webböngészőt az oldalon lévő egyes elemek funkcionális céljáról, például egy bekezdés, címsor vagy lista. A HTML 4 óta a Cascading Style Sheets lehetővé teszi a kódoló számára, hogy elmondja a böngészőnek, hogyan kell kinéznie az egyes elemeknek, függetlenül attól, hogy mi is azok. Egy oldal különböző CSS-stílusokkal rendelkezhet különböző típusú eszközökhöz, például mobiltelefonokhoz és asztali számítógépekhez, lehetővé téve az oldal megjelenésének megváltoztatását anélkül, hogy a kódolónak módosítania kellene a HTML-t. Használja a CSS-tulajdonságokat a kép középre állításához.

1. lépés

Helyezze el az „img” címkét a HTML-fájlba azon a helyen, ahol meg szeretné jeleníteni a képet a weboldalon. A "body" címkék között és a "h1" címkék után kell lennie. Például,

A nap videója

Ez a te szöveged.

A kép leírása

egy photo.jpg nevű képet határoz meg, amely 170 pixel széles és 50 képpont magas. Ez az első dolog az oldalon a felső címsor után.

2. lépés

Használja a "margó" CSS attribútumot az oldalelemek, például a képek körüli tér meghatározásához. A margó attribútum "auto" értéke arra utasítja a webböngészőt, hogy automatikusan határozza meg a hely mennyiségét. Így, A kép leírása meghatározza, hogy a kép körüli teret a böngésző határozza meg.

3. lépés

Használja a "display" tulajdonságot az oldalelem megjelenítési módjának meghatározásához. A megjelenítési tulajdonság "block" értéke arra utasítja a webböngészőt, hogy az elemet a saját sorában jelenítse meg, felette és alatta szóközzel. Így, A kép leírása ugyanazt a képet határozza meg, de a "display: block;" hozzáadásával most a saját vonalára helyezi.

4. lépés

Tekintse meg a weboldalt több különböző böngészőben, és ellenőrizze, hogy a kép megfelelően van-e középre állítva.

Tipp

Adja meg a kép leírását az "alt" címkén belül. Ezáltal az oldal könnyebben elérhető a látássérült olvasók számára, és biztosítja, hogy kódja megfeleljen a szabványoknak. A kép leírása