متن متمرکز در HTML

نویسنده: Tamara Smith
تاریخ ایجاد: 28 ژانویه 2021
تاریخ به روزرسانی: 1 جولای 2024
Anonim
متن CSS مرکز افقی و عمودی
ویدیو: متن CSS مرکز افقی و عمودی

محتوا

این wikiHow به شما می آموزد که چگونه متن را در یک وب سایت HTML قرار دهید. ما برای این کار از CSS (Cascading Style Sheets یا Sheets Style) استفاده می کنیم. ما قبلاً با استفاده از مرکز>برچسب ، اما این دیگر در اکثر مرورگرها کار نمی کند.

گام برداشتن

روش 1 از 2: استفاده از CSS

  1. فایل متنی را که در آن سبک های خود را توصیف می کنید باز کنید. در حال حاضر مرکز>از برچسب دیگر استفاده نمی شود ، یک عنصر جدید در این پرونده ایجاد کنید که متن را در مناطق خاصی از سند HTML شما مرکز می کند. اگر فایل CSS جداگانه ای ندارید ، کدها در بالای سند HTML بین برچسب های "style>" و "/ style>" قرار دارند.
    • به عنوان سبک>- و / سبک>برچسب ها هنوز وجود ندارند ، می توانید آنها را مستقیماً در زیر قرار دهید بدن>به روش زیر برچسب بزنید:
    • ! DOCTYPE html> html> body> style> / style>

  2. کلاسی ایجاد کنید که متن را متمرکز کند. div>tag به سند HTML شما می گوید که این کلاس مربوط به کدام بخش خاص است. موارد زیر را بین برچسب های "سبک" تایپ کنید ، مطمئن شوید که دو بار کلیک کنید وارد شوید بعد از خط اول:

      div.a {}

  3. اضافه کردن تراز کردن متنویژگی. تایپ کنید text-align: مرکز؛ بین بریس در div.a-بخش. "هدر" اکنون به این شکل است:

      ! DOCTYPE html> html> body> style> div.a {text-align: center؛ } / style>

  4. مورد صحیح را اضافه کنید divمتن موردنظر را در مرکز قرار دهید. شما این کار را از طریق div>بالای این متن برچسب گذاری کنید و آن را با یک بسته کنید / div>زیر این متن برچسب بزنید. به عنوان مثال ، اگر می خواهید عنوان و پاراگرافی را در زیر آن قرار دهید ، به این صورت است:

      div> h1> به وب سایت من خوش آمدید / h1> p> این وب سایت عمدتا برای ارائه اطلاعات در مورد همه چیز است. / p> / div>

  5. استفاده از div.aبرچسب گذاری برای قرار دادن سایر عناصر. وقتی می خواهید عنصر دیگری مانند محتوای بین برچسب ها را در مرکز قرار دهید p> / p> و h2> / h2>) ، شما تایپ می کنید div> برای این عنصر و / div> پس از آن از آنجا که قبلاً "div.a" را به عنوان کد CSS متمرکز تعریف کرده اید ، این عناصر اکنون نیز مرکز هستند.

      style> 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: استفاده از برچسب "center" در HTML

  1. سند HTML خود را باز کنید. این روش نحوه به دست آوردن منسوخ را توصیف می کند مرکز>برچسب زدن این روش ممکن است هنوز در تعدادی از مرورگرها کارساز باشد ، اما بهتر است زیاد به آن اعتماد نکنید.
  2. متنی را که می خواهید در مرکز قرار دهید پیدا کنید. سند خود را به پایین اسکرول کنید تا عنوان ، پاراگراف یا متن دیگری را که می خواهید در مرکز قرار دهید پیدا کنید.
  3. برچسب "مرکز" را در دو طرف متن قرار دهید. کد به این شکل است مرکز> متن / مرکز>. در اینجا ، "متن" متنی است که باید مرکز شود. اگر برچسب های دیگری مانند "p> / p>" در این متن وجود دارد ، برچسب های "center" را خارج از برچسب های موجود قرار دهید.

      center> h1> به وب سایت من خوش آمدید / h1> / center> center> خود را راحت کنید! / مرکز>

  4. سند HTML خود را بررسی کنید. باید چیزی شبیه به این باشد:

      ! DOCTYPE html> html> body> h1> center> به وب سایت / مرکز من خوش آمدید> / h1> center> این کار را برای خود آسان کنید! / Center> p1> این وب سایت عمدتا برای ارائه اطلاعات در مورد همه چیز است. / p1> / body > / html>