Co vědět?
- V HTML umístěte značku div kolem obrázku:
- Přidat atribut stylu:
- Nastavte šířku div na šířku obrázku, přidejte vlastnost zarovnání textu, přidejte mezeru mezi obrázek a titulek a poté přidejte textový titulek.
Tento článek vysvětluje, jak do svého webového obrázku přidat popisek a zajistit, aby nadpis zůstal u vašeho obrázku, kamkoli jej na webové stránce přesunete.
Kroky k popisku obrázku HTML
Titulky k obrázku jsou důležité, protože přidávají do vašich vizuálních prvků webové stránky další informace.
-
Přidejte obrázek na svou webovou stránku.
-
V HTML pro vaši webovou stránku umístěte kolem obrázku značku div:
zadejte = „kód“>
-
Přidejte do značky div atribut style:
zadejte = „kód“>
-
Nastavte šířku div na stejnou šířku jako obrázek pomocí vlastnosti width style:
-
U titulků, které jsou o něco menší než okolní text, přidejte do stylu div vlastnost velikosti písma:
-
Titulky vypadají nejlépe, pokud jsou vycentrovány pod obrázkem, takže do atributu style přidejte vlastnost zarovnání textu:
zadejte = „kód“>
-
Nakonec přidejte mezi obrázek a popisek trochu větší mezeru přidáním atributu style k obrázku pomocí vlastnosti stylu padding-bottom: padding-bottom: 0.5em; “ />
-
Poté přidejte textový popisek přímo pod obrázek:
This is my caption type = „code“> Nahrajte webovou stránku na svůj server a otestujte ji v prohlížeči.
Tipy pro titulky
Rozměry CSS mohou být v mnoha různých měřeních, takže obvykle musíte zahrnout typ měření. Například: Rozměry obrázku HTML jsou však vždy v pixelech, takže měření necháte vypnuté. Pokud šířku div zvětšíte na šířku obrázku, může se vedle obrázku zobrazit titulek. Pokud je to to, co chcete, přidejte a
tag přímo před titulek a za značku obrázku.