فرادرسآموزش وسط چین در HTML – به زبان ساده + مثال، دستور و کد
عنصر centerدر زبان نشانه گذاری HTML، که اغلب به عنوان تگ centerشناخته میشود، به طور معمول برای قرار دادن محتوا به صورت وسط‌چین در صفحه وب استفاده میشود و اصطلاحاً برای کارهای وسط چین در HTML مورد استفاده قرار میگیرد. با این حال، در استانداردهای مدرن HTML این تگ به نوعی منسوخ شده است و به جای آن از ویژگی text-align: centerدر زبان شیوه‌نامه CSS استفاده میشود. در این مطلب از «مجله فرادرس» قرار است در رابطه با این تگ و شیوه‌های وسط چین کردن متن در استانداردهای مدرن برنامه نویسی وب به همراه ارائه چند مثال عملی، اطلاعاتی مفید ارائه شود.
تگ center در HTML چیست؟
تگ centerدر HTML ابتدا برای انجام کارهای وسط چین در HTML استفاده میشد. با این حال، در نسخههای بعدی HTML، این تگ منسوخ شده و رویکرد پیشنهادی استفاده از ویژگی‌های CSS برای دستیابی به وسط‌چین کردن متن است.
«سیتنتکس» (Syntax) استفاده از این تگ به عنوان یکی از پر کاربرترین تگ‌های HTML به صورت زیر است:
1<center> Text content... </center>تگ centerدر HTML هیچ ویژگی خاص و منحصر به خود را ندارد. در عوض، میتوان آن را با تمام ویژگی‌های معمولی که با هر عنصر HTML کار میکند ترکیب کرد. این ویژگی‌ها به عنوان ویژگی‌های جهانی یا سراسری شناخته می‌شوند و می‌توانند با بسیاری از عناصر مختلف HTML استفاده شوند. این بدان معناست که میتوان ویژگی‌های استانداردی مانند «id» ،«class» ،«style»و موارد دیگر را در تگ centerاعمال کرد، درست مانند سایر عناصر HTML.
کاربرد تگ center در HTML چیست؟
تگ center که قبلاً در «HTML4» استفاده میشد، برای قرار دادن افقی متن در مرکز صفحه وب استفاده میشد. با این حال، «HTML5» این تگ را منسوخ کرده است. برای دستیابی به همان تراز مرکزی یا وسط چین کردن، ویژگی «text-align: center» اکنون مورد استفاده قرار میگیرد. تگ center در اصل بهعنوان نوعی عنصر در سطح بلوک، میتواند عناصر درونخطی و بلوک را در کل بخش صفحه متمرکز کند.
از سوی دیگر، ویژگی text-align: centerعنصر درونخطی محسوب میشود که برای عناصری مانند div و pقابل اعمال است. از این تگ بهتر است به منظور وسط چین در HTML برای بخش‌های خاصی از خطی خاص در صفحه وب استفاده شود. استفاده از ویژگی‌های CSS برای وسط‌چین کردن متن در HTML، انطباق با استانداردهای توسعه وب مدرن را تضمین میکند و بهتر است از این روش استفاده شود که در ادامه به بررسی آن خواهیم پرداخت.
فرق بین تگ center و ویژگی CSS برای وسط چین در HTML چیست؟
همانطور که در بالا نیز به این موضوع اشاره شد، تمایز اصلی بین این دو روش در سازگاری آنها با استانداردهای HTML نهفته است. تگ «center» با ظهور HTML5 منسوخ شده در حالی که ویژگی «text-align: center» به طور کامل در HTML5 و نسخههای آینده پشتیبانی میشود. تگ «center» عنصری در سطح بلوک است، به این معنی که میتوان آن را برای عناصر سطح بلوک و عناصر درونخطی اعمال کرد. برعکس، ویژگی «text-align: center» عنصری درونخطی است که محتوا را بدون تغییر ابعاد آن متمرکز کرده و به طور مؤثر با عناصری مانند «div» و «p» کار میکند.
در عمل، تگ centerبرای وسط چین در HTML برای کل بخش‌ها به صورت افقی روشی مناسب بود، در حالی که text-align: centerبرای قسمت یا خطی خاص در صفحه مناسب است. در ادامه تفاوت‌های کلیدی این دو تگ به وضوح بیان شده است:
- تگ centerدر HTML5 منسوخ شده ولی ویژگی text-align: centerدر HTML5 و نسخههای بعدی پشتیبانی میشود.
- تگ centerعنصر سطح بلوک مناسب برای متمرکز کردن محتوای درونخطی و سطح بلوک است در حالی که عنصر text-align: centerبرای تراز کردن محتوا بدون تغییر ابعاد آن استفاده میشود.
- تگ centerبرای وسط‌چین کردن کل بخش‌ها مناسب است ولی ویژگی text-align: centerبه منظور انجام کارهای وسط چین در HTML برای خط یا بخشی خاص، کاربرد دارد.
مثال از تگ Center
در ادامه، چند مثال از این تگ را بررسی می‌کنیم.
مثالی از تگ center برای وسط چین در HTML
در این بخش مثالی از تگ centerبرای وسط چین در HTML برای درک بهتر این موضوع آورده شده است. تگ centerدر HTML برای تراز کردن محتوا در بخش کاملی از صفحه وب استفاده میشود. در این مثال، از تگ‌های h1 و pدر تگ centerاستفاده شده است:
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>
6 center tag in HTML
7 </title>
8 <!-- The styling will be done here-->
9 <style>
10 /* set the background color as black*/
11 body {
12 background-color: black;
13 }
14
15 /* h1 tags have been set to color white */
16 h1 {
17 color: white;
18 }
19
20 /* p tags will be of color whitesmoke */
21 p {
22 color: whitesmoke;
23 }
24 </style>
25</head>
26
27<body>
28 <!-- We are using <center> tag to position the elements horizontally in the center.-->
29
30 <!-- We are placing the entire content in the <center> tag. The content includes a heading and two paragraphs.-->
31 <center>
32 <h1>center tag in HTML</h1>
33
34 <p>Each of these content will be at the center.</p>
35
36 <p>
37 This is because these are all placed inside the center tag.
38 </p>
39
40 </center>
41 <!-- So, the <center> tag works on the entire section. -->
42</body>
43
44</html>خروجی کد بالا در صفحه مرورگر به صورت زیر است:
در خروجی نمایش داده شده، تگ centerشامل یک تگ h1و دو تگ pاست. این نشان می‌دهد که تگ centerبه جای اینکه خط خاصی از محتوا را در مرکز قرار دهد، روی کل بخش عمل میکند.
مثالی از ویژگی CSS برای وسط چین در HTML
در این بخش مثالی از ویژگی CSS برای وسط چین در HTML ارائه میشود. این مثال نشان می‌دهد که چگونه ویژگی text-align: centerمیتوان از آن برای وسط چین کردن متن استفاده کرد. برخلاف مثال قبلی، این ویژگی به طور جداگانه برای عناصر درون خطی مانند تگ‌های h1و pاعمال میشود. قطعه کد این مثال به صورت زیر است:
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>
6 CSS text-align property
7 </title>
8
9 <!-- The styling for the elements will be done here -->
10 <style>
11 /* Setting background color, font, and color for the entire body */
12 body {
13 background-color: black;
14 font-family: 'Trebuchet MS';
15 color: whitesmoke;
16 }
17
18 /* font size for h1 tags */
19 h1 {
20 font-size: 36px;
21 }
22
23 /* color black for p tags */
24 p {
25 color:black;
26 }
27
28 /* We'll have a div placed at the center of the body that contains elements that are yet to be positioned horizontally according to their parent element, i.e., div */
29 div {
30 /* margin: auto; places the div horizontally at the center */
31 margin: auto;
32 background: linear-gradient(to right, #009fff, #ec2f4b);
33 width: 800px;
34 border-radius: 10px;
35 }
36 </style>
37</head>
38
39<body>
40 <!-- Create a block-level element -->
41 <div>
42 <!-- We'll be using <h1> tag and <p> tags -->
43 <h1>
44 CSS text-align property
45 </h1>
46
47 <p>
48 Let's position this line in the center of the div
49 </p>
50
51 <p>
52 We'll make use of the text-align property
53 </p>
54 </div>
55 <!-- Although the div block is centered horizontally, the elements inside it aren't -->
56
57</body>
58
59</html> خروجی مثال بالا در صفحه مرورگر به صورت زیر است:
در مثال قبلی برای وسط چین کردن عناصر در صفحه وب، از text-align: centerاستفاده شد. در زیر میتوان تغییرات اعمال شده در تگ styleنمونه قبلی را مشاهده کرد.
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>
6 CSS text-align property
7 </title>
8
9 <!-- The styling for the elements will be done here -->
10 <style>
11 /* Setting background color, font, and color for the entire body */
12 body {
13 background-color: black;
14 font-family: 'Trebuchet MS';
15 color: whitesmoke;
16 }
17
18 /* font size for h1 tags */
19 h1 {
20 font-size: 36px;
21 }
22
23 /* color black for p tags */
24 p {
25 color:black;
26 }
27
28 /* We'll have a div placed at the center of the body that contains elements that are also at the center of the div. */
29 div {
30 /* margin: auto; places the div horizontally at the center */
31 margin: auto;
32 background: linear-gradient(to right, #009fff, #ec2f4b);
33 width: 800px;
34 border-radius: 10px;
35 }
36 </style>
37</head>
38
39<body>
40 <!-- Create a block-level element -->
41 <div>
42 <!-- We'll be using <h1> tag and <p> tags -->
43 <!-- All the following tags will have "text-align: center;" property -->
44 <h1 style="text-align:center;">
45 CSS text-align property
46 </h1>
47
48 <p style="text-align:center;">
49 Let's position this line into the center of the div
50 </p>
51
52 <p style="text-align:center;">
53 We'll make use of the text-align property
54 </p>
55 </div>
56 <!-- Here, both the div, as well as its elements are centered horizontally. -->
57
58</body>
59
60</html> خروجی کد بالا به صورت زیر است:
در این کد که به‌روز شده است، ویژگی text-align: centerبرای هر عنصر اعمال میشود تا اطمینان حاصل شود که هم divو هم محتوای آن به صورت افقی در مرکز قرار دارند.
سخن پایانی
تگ centerدر HTML دیگر در HTML5 پشتیبانی نمی‌شود زیرا منسوخ شده است و قبلا از آن برای وسط چین کردن افقی متن استفاده میشد. در حال حاضر، روش پیشنهادی برای وسط چین کردن عناصر، استفاده از ویژگی text-align: centerاست که میتواند هر بخش از متن را در صفحه وب متمرکز کند. توجه به این نکته مهم است که تگ centerعنصری در سطح بلوک بود که هم برای عناصر سطح بلوک و هم برای عناصر درون خطی مورد استفاده قرار می‌گرفت، در حالی که ویژگی text-align: centerبه عنوان نوعی عنصر درون خطی عمل میکند که میتواند با عناصر جداگانه مانند divیا pاستفاده شود. علاوه بر این، تگ centerرا میتوان همراه با ویژگی‌های جهانی موجود در HTML استفاده کرد.
در مطلب فوق از مجله فرادرس توضیحات کاملی برای انجام کارهای وسط چین در HTML با استفاده از تگ centerو ویژگی text-align: centerبیان و برای تفهیم بهتر مثال‌های کاربردی هم ارائه شد. همچنین تفاوت کامل این دو روش برای انجام کارهای وسط چین کردن در HTML مورد بحث قرار گرفت. به امید اینکه مطلب فوق برای شما مفید بوده باشد.
