Цэнтраваць тэкст у HTML

Аўтар: Tamara Smith
Дата Стварэння: 28 Студзень 2021
Дата Абнаўлення: 1 Ліпень 2024
Anonim
Customizable typewriter animation with CSS
Відэа: Customizable typewriter animation with CSS

Задаволены

Гэтая wikiHow навучыць вас цэнтраваць тэкст на HTML-сайце. Для гэтага мы выкарыстоўваем CSS (каскадныя табліцы стыляў альбо табліцы стыляў). Мы выкарыстоўвалі цэнтр у HTML з дапамогай цэнтр>тэг, але гэта больш не працуе ў большасці аглядальнікаў.

Крок

Спосаб 1 з 2: Выкарыстанне CSS

  1. Адкрыйце тэкставы файл, у якім вы апісваеце свае стылі. Цяпер цэнтр>тэг больш не выкарыстоўваецца, стварыце ў гэтым файле новы элемент, які будзе цэнтраваць тэкст у пэўных абласцях вашага дакумента HTML. Калі ў вас няма асобнага файла CSS, коды знаходзяцца ўверсе HTML-дакумента паміж тэгамі "style>" і "/ style>".
    • Як стыль>- і / стыль>тэгаў яшчэ няма, вы можаце змясціць іх непасрэдна пад цела>пазначыць наступным чынам:
    • ! DOCTYPE html> html> body> style> / style>

  2. Стварыце клас, які цэнтруе тэкст. div>тэг паведамляе вашаму HTML-дакументу, да якога канкрэтна падзелу адносіцца гэты клас. Увядзіце наступнае паміж тэгамі "стыль", пераканаўшыся, што націснулі двойчы ↵ Увайдзіце пасля першага радка:

      div.a {}

  3. Дадайце выраўноўванне тэкстумаёмасць. Тып выраўноўванне па тэксце: па цэнтры; паміж дужкамі ў дзів.а-раздзел. "Загаловак" цяпер выглядае так:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / стыль>

  4. Дадайце правільны дзівпазнаку да тэксту, які вы хочаце цэнтраваць. Вы робіце гэта праз div>тэг над гэтым тэкстам і зачыніўшы яго знакам / div>тэг пад гэтым тэкстам. Напрыклад, калі вы хочаце адцэнтраваць загаловак і абзац пад ім, гэта выглядае так:

      div> h1> Сардэчна запрашаем на мой сайт / h1> p> Гэты сайт у асноўным прадастаўляе інфармацыю пра рэчы. / p> / div>

  5. Выкарыстоўваць дзів.атэг для цэнтравання іншых элементаў. Калі вы хочаце сканцэнтраваць іншы элемент, напрыклад, змест паміж тэгамі p> / p> і h2> / h2>), вы набіраеце div> для гэтага элемента і / div> пасля. Паколькі вы ўжо вызначылі "div.a" як цэнтруючы CSS-код, гэтыя элементы цяпер таксама па цэнтры.

      стыль> div.a {text-align: center; } / style> div> h2> Вітаюцца ахвяраванні / h2> p> калі ласка / p> / div>

  6. Праверце дакумент. Хоць тэкст на вашай вэб-старонцы, зразумела, іншы, ён павінен выглядаць прыблізна так:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style> div> h1> Сардэчна запрашаем на мой сайт / h1> p> Гэты сайт прызначаны ў асноўным для прадастаўлення інфармацыі пра рэчы. / p> / div> div> h2> Вітаюцца ахвяраванні / h2> p> калі ласка / p> / div> / body> / html>

Спосаб 2 з 2: Выкарыстанне тэга "цэнтр" у HTML

  1. Адкрыйце HTML-дакумент. Гэты метад апісвае, як састарэць цэнтр>пазнака. Гэты метад усё яшчэ можа працаваць у шэрагу аглядальнікаў, але лепш не занадта на яго спадзявацца.
  2. Знайдзіце тэкст, які вы хочаце цэнтраваць. Пракруціце дакумент, пакуль не знойдзеце загаловак, абзац ці іншы тэкст, які вы хочаце адцэнтраваць.
  3. Размесціце тэг "па цэнтры" па абодва бакі тэксту. Код выглядае так цэнтр> тэкст / цэнтр>. Тут "тэкст" - гэта тэкст для цэнтру. Калі ў гэтым тэксце ёсць іншыя тэгі, напрыклад, "p> / p>" перад абзацам, пастаўце "цэнтральныя" тэгі за межы існуючых тэгаў.

      center> h1> Сардэчна запрашаем на мой вэб-сайт / h1> / center> center> Камфортна! / center>

  4. Праверце свой HTML-дакумент. Гэта павінна выглядаць прыблізна так:

      ! DOCTYPE html> html> body> h1> center> Сардэчна запрашаем на мой сайт / цэнтр> / h1> center> Зрабіце гэта проста для сябе! / Center> p1> Гэты вэб-сайт у асноўным прадастаўляе інфармацыю пра рэчы. / P1> / body > / html>