HTML -де суретті қалай орталықтандыруға болады

Автор: Mark Sanchez
Жасалған Күн: 6 Қаңтар 2021
Жаңарту Күні: 1 Шілде 2024
Anonim
HTML -де суретті қалай орталықтандыруға болады - Қоғам
HTML -де суретті қалай орталықтандыруға болады - Қоғам

Мазмұны

Атрибут туралау тег html> HTML5 -тен бастап ескірген. Бұл атрибут көптеген веб -браузерлерде әлі де жұмыс жасаса да, кескіндерді каскадты стиль кестелері (CSS) көмегімен туралау ұсынылады. Бұл мақалада біз сізге CSS және ескірген тег көмегімен суреттерді қалай орталықтандыруға болатынын көрсетеміз. туралау.

Қадамдар

2 -ші әдіс 1: CSS (Ұсынылады)

  1. 1 Суретке HTML кодын қосыңыз. Сіз кескінді туралау үшін каскадты стиль кестелерін (CSS) қолданасыз, бірақ оны HTML көмегімен бетте орналастыру қажет болады. Төменде тегті қолданудың мысалы келтірілген img> кодқа суретті енгізу үшін:

    img src = «dog.webp» alt = «бұл иттің суреті»>

    • Орнына dog.webp сурет файлының атауын ауыстырыңыз және «alt» белгісінен кейін суреттің сипаттамасын енгізіңіз. Мағынасы орталық «сынып» үшін өзгермейді, себебі сіз CSS класын осы атаумен жасайсыз.
  2. 2 CSS кодын табыңыз. Егер сіздің сайтыңызда бөлек CSS файлы болса, оны ашыңыз. Олай болмаған жағдайда, CSS HTML файлының жоғарғы жағында, тегтер ішінде болуы ықтимал бас>... Тегтерді табу үшін файлдың жоғарғы жағына жылжыңыз стиль> / стиль>.
    • Егер тегтер болса стиль> / стиль> жоқ, оларды қосыңыз. Қосымша ақпарат алу үшін осы мақаланы оқыңыз.
  3. 3 Кескінді туралау үшін CSS қосыңыз. «50%» орнына суреттің бетте пайда болуы үшін басқа мән енгізуге болады. Сіз кескінді «100%» мәнімен орталай алмайсыз, сондықтан бұл сан басқаша болуы керек.

    .орталық {дисплей: блок; сол жақ шеті: автоматты; оң жақ шеті: автоматты; ені: 50%; }

  4. 4 Өзгерістерді сақтаңыз. HTML файлын және CSS файлын сақтаңыз (бар болса). Бұл кескінді орталықтандырады.
    • Сонымен қатар тегтер ішінде img> қосуға болады басқа суреттерді ортаға қою.

2 -ші әдіс 2: HTML -де «align» атрибуты

  1. 1 Жаңа абзац жасаңыз. Кескіндерді орталықтандырудың бұл әдісі ескіргенімен, ол көптеген браузерлерде жұмыс істейді. Дегенмен, браузерлер көрсетілген төлсипатты қолдауды тоқтатқан кезде сайттың жұмыс істеуін қамтамасыз ету үшін CSS қолдануды ұсынамыз. Атрибут екенін есте сақтаңыз туралау суретті тек оны қоршап тұрған элементтің ортасына орналастырады (мысалы, тегтердің ішінде) p> / p> немесе div> / div>). Мысал ретінде HTML файлында біз қосу арқылы жаңа параграф құрамыз p> бөлек жолда.
  2. 2 Суретке HTML кодын қосыңыз. Тегтен кейін келесі кодты енгізіңіз p>... Бұл мысалды нұсқаулық ретінде қолданыңыз:

    p> img src = «dog.webp» alt = «picture» align = «middle»>

    • Орнына dog.webp сурет файлының атауын ауыстырыңыз және «alt» белгісінен кейін суреттің сипаттамасын енгізіңіз.
    • Middle атрибуты браузерге суретті беттің ортасында көрсетуді ұсынады.
  3. 3 Абзац белгісін жабыңыз. Мұны істеу үшін қосыңыз / б> сурет белгісінен кейін. Дайын код келесідей болуы керек:

    p> img src = «dog.webp» alt = «picture» align = «middle»> / p>

  4. 4 Өзгерістерді сақтаңыз. Бұл кескінді орталықтандырады.