Obrazy dodają życiu twoich stron internetowych i przyciągają uwagę widzów. Podpisy zawierają dodatkowe informacje o obrazach internetowych, ale mogą być trudne do dodania do stron internetowych bez zaawansowanych umiejętności HTML i CSS. Oto niezawodna metoda dodawania prostego, ale atrakcyjnego podpisu do obrazu, który pozostaje z obrazem, niezależnie od tego, gdzie przeniesiesz go na stronę.
Kroki prowadzące do podpisu obrazu HTML
-
Dodaj obraz do swojej strony internetowej.
-
W kodzie HTML strony internetowej umieść znacznik div wokół obrazu:
-
Dodaj atrybut stylu do tagu div:
styl = ""> -
Ustaw szerokość elementu div na tę samą szerokość, co obraz, z właściwością width width:
-
W przypadku napisów nieco mniejszych niż otaczający tekst dodaj właściwość font-size do stylu div:
-
Napisy wyglądają najlepiej, jeśli są wyśrodkowane pod obrazem, więc dodaj właściwość text-align do atrybutu stylu:
-
Na koniec dodaj trochę dodatkowej przestrzeni między obrazem a podpisiem, dodając atrybut stylu do obrazu z właściwością stylu wypełnienia-dołu:
style = "padding-bottom: 0.5em;" />
-
Następnie dodaj podpis tekstowy bezpośrednio pod obrazem:
Prześlij stronę na serwer i przetestuj ją w przeglądarce.
Porady dotyczące napisów
- Wymiary CSS mogą się mieścić w wielu różnych wymiarach, więc zwykle musisz uwzględnić typ pomiaru. Na przykład:
szerokość: 100px; Jednak wymiary obrazu HTML są zawsze w pikselach, więc pomijasz pomiar.
szerokość = "100"
- Jeśli szerokość elementu div jest większa niż szerokość obrazu, podpis może pojawić się obok obrazu. Jeśli tego chcesz, dodaj a
tag bezpośrednio przed napisami i po tagach graficznych.
