آموزش و یادگیری تگ center در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <center> آشنا مي‌شويم. اين تگ در نسخه‌هاي قديمي HTML براي وسط‌چين کردن محتوا استفاده مي‌شد، اما در HTML5 منسوخ شده و امروزه بايد از CSS براي اين کار استفاده کرد.

تگ center در HTML چيست؟

تگ <center> در گذشته براي قرار دادن متن، تصوير يا عناصر ديگر در مرکز صفحه يا والد خود به کار مي‌رفت. امروزه اين کار با CSS و ويژگي‌هايي مثل text-align و margin انجام مي‌شود.

مثال ساده از تگ center

<center>
  <h3>به سايت آموزش دون خوش آمديد</h3>
</center>

در اين مثال، متن "به سايت آموزش دون خوش آمديد" در مرکز صفحه نمايش داده مي‌شود. اما توجه کنيد که اين روش در HTML5 توصيه نمي‌شود.

روش مدرن با CSS

به جاي استفاده از تگ منسوخ‌شده <center>، از CSS براي وسط‌چين کردن استفاده کنيد.

?. وسط‌چين کردن متن

<div style="text-align: center;">
  <p>اين متن با CSS وسط‌چين شده است</p>
</div>

?. وسط‌چين کردن تصوير يا المان

<style>
  img {
    display: block;
    margin: 0 auto;
  }
</style>
<img src="/images/logo.png" alt="آموزش دون">

در اين روش، تصوير با استفاده از margin: 0 auto; در مرکز بلوک والد قرار مي‌گيرد.

چرا تگ center منسوخ شد؟

• تگ <center> تنها ظاهر محتوا را تغيير مي‌داد، نه ساختار آن.
• در HTML5 تمام تنظيمات ظاهري بايد از طريق CSS انجام شود.
• کدهاي داراي <center> در سايت‌هاي مدرن، غيراستاندارد و غيربهينه براي سئو هستند.

جايگزين‌هاي پيشنهادي تگ center

نمونه مدرن با Flexbox

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
</style>

<div class="container">
  <h3>مرکز صفحه با Flexbox</h3>
</div>

براي يادگيري کامل Flexbox، CSS Grid و روش‌هاي مدرن چيدمان عناصر وب، در دوره آموزش HTML و CSS آموزش دون شرکت کنيد.

همچنين براي مشاهده تمام آموزش‌هاي HTML به صفحه اصلي آموزش دون مراجعه کنيد.