کد وسط چین عکس و متن در Html

محمد رحمانیان
1402/12/25
511
کد وسط چین عکس و متن در Html

ترازبندی و قرار دادن المان‌ها و عناصر HTML از اهمیت بالایی در طراحی فرانت اند برخوردار هستند. در مواردی نیاز به قرار دادن عناصر در وسط صفحه یا یک بخش داریم. برای مثال، ممکن است بخواهیم یک تصویر را وسط چین کنیم و برای این کار، باید با کدهای مورداستفاده برای وسط چین کردن عکس در HTML آشنا باشیم. در ادامه این مطلب از وبلاگ سبزلرن، به آموزش وسط چین کردن تصاویر و متن در HTML می‌پردازیم و روش‌های مختلف این کار را تشریح می‌کنیم.

اموزش html

کد وسط چین عکس در Html چه کاری انجام می‌دهد؟

به طور کلی، کاربرد اصلی این کد این است که عنصر موردنظر را در وسط بخشی که در آن قرار دارد، ترازبندی کند. صفحات وب دارای طرح‌بندی یا Layout مشخصی هستند که قبل از توسعه صفحه طراحی می‌شوند. طرح بندی یک صفحه ممکن است شامل چندین بخش یا بلاک (Block) مختلف نظیر هدر، فوتر، سایدبار، محتوای اصلی، نظرات، لوگو و موارد دیگری باشد. علاوه بر این، هرکدام از این قسمت‌ها نیز به بخش‌های کوچک‌تری تقسیم می‌شوند. منظور از وسط چین کردن در HTML، این است که یک یا چند مورد از المان‌هایی که در یک بخش قرار دارند، به مرکز این بلاک منتقل شوند. برای مثال، به تصویر زیر نگاه کنید.

برای ترازبندی یک تصویر یا متن، این عناصر براساس بلوکی که در آن قرار دارند، تنظیم می‌شوند. یک عنصر می‌تواند  در حالت‌های مختلفی ترازبندی شود؛ جهت‌هایی مثل چپ چین، راست چین و وسط چین در Html دردسترس هستند؛ اما سایر ترازبندی‌ها با استفاده از CSS قابل دسترسی هستند. ترازبندی‌های مختلف که با استفاده از CSS قابل پیاده سازی هستند را در تصویر زیر می‌بینید.

چه روش‌هایی برای وسط چین کردن در HTML وجود دارد؟

اصلی‌ترین روش‌هایی که به ما کمک می‌کند فرآیند وسط چین کردن تصاویر و متن در Html را انجام دهیم، استفاده از دستورات CSS یا تگ Center هستند. در ادامه به طور مفصل درباره هر روش صحبت می‌کنیم و نمونه کدهایی برای هرکدام به شما ارائه می‌دهیم.

آموزش وسط چین کردن عکس در Html

قبل از پرداختن به این موضوع، باید توضیح مختصری از تگ‌های Block و Inline ارائه دهیم. به طور کلی، تگ‌های Block یک خط از صفحه را به طور کامل اشغال می‌کنند؛ به طوری که اگر دو تگ Block در کنار یکدیگر قرار بگیرند، هر تگ در یک خط جدید ظاهر شده و مرورگر به صورت خودکار، مقداری فضا به بالا و پایین آنها اختصاص می‌دهد. این مورد درباره تگ‌های Inline برعکس است؛ یعنی این عناصر تنها به مقدار موردنیاز خود از عرض صفحه استفاده می‌کنند و می‌توانند در کنار یکدیگر مورداستفاده قرار بگیرند.

به طور کلی، در زبان HTML تصاویر با استفاده از تگ img ایجاد می‌شوند. این تگ، از نوع Inline است و کار با آن متفاوت‌تر از تگ‌های Block مثل P یا Div است. 3 روش برای وسط چین کردن عکس در Html وجود دارد:

1| استفاده از دستورات CSS برای ترازبندی

2| تبدیل تگ img به تگ Block

3| استفاده از تگ Center

در ادامه نحوه استفاده از روش‌های بالا را شرح می‌دهیم.

کد وسط چین عکس در Html با استایل‌های CSS

برای این کار، می‌توانید تصویر موردنظر خود را تعریف کنید و در تگ img از صفت‌های ترازبندی در CSS استفاده کنید. برای درک بهتر این روش به کد زیر دقت کنید.

<p class="aligncenter">
    <img src="image.jpg" alt="centered image"/>
</p>
<style>
.aligncenter{
text-align: center;
}
</style>

در این قطعه کد، یک تصویر با استفاده از تگ img درون یک تگ P تعریف شده است. تگ P دارای کلاس Aligncenter است. در ادامه در بخش استیل‌های CSS از ویژگی Text-align برای وسط چین کردن عناصری که از این کلاس استفاده می‌کنند استفاده کردیم.

دقت داشته باشید در صورت استفاده از تگ div برای وسط چین کردن عکس در Html ممکن است نیاز به تنظیم فاصلله خارجی یا Margin داشته باشید. در این صورت، باید این ویژگی را هم در بخش استایل‌ها تنظیم کنید.

تبدیل تگ img به تگ Block

علاوه بر روش بالا، یک راهکار دیگر نیز وجود دارد. می‌توانید با استفاده از ویژگی Display در CSS تگ img خود را به یک تگ Block تبدیل کنید و به جای اینکه برای تگ div کلاس یا استایل تعریف کنید، این ویژگی را مستقیما برای تصویر خود اعمال کنید.

به قطعه کدهای زیر توجه کنید.

<div>
    <img class=" centerImage " src="image.jpg" alt="centered image"/>
</div>
<style>
.centerImage{
text-align: center;
display: block;
}
</style>

در این کد، ابتدا تصویر را با کلاس centerImage ایجاد کردیم و در بخش استایل‌ها، مقدار Display را روی Block و مقدار Text-Align را Center تعیین کردیم. اصلی‌ترین تفاوت این کد با کد قبلی، در این است که تگ img و تصویر به صورت Block درآمده؛ در نتیجه کل عرض آن خط را اشغال کرده و دیگر نمی‌توان المان دیگری را کنار آن قرار داد.

وسط چین کردن عکس در HTML با تگ Center

یکی دیگر از روش‌های وسط چین کردن عکس‌ها در HTML استفاده از تگ Center است؛ البته این تگ در Html 5 منسوخ شده و بهتر است از آن استفاده نکنید. با این حال، در صورتی که روش‌های قبلی برای شما کار نکرد، می‌توانید از این روش به عنوان یک جایگزین موقت استفاده کنید. این روش نیازی به تعریف کردن استایل با CSS ندارد؛ تنها کافیست تصویر خود را بین دو تگ Center قرار دهید!

<center>
<img src="image.jpg" alt="centered image"/>
</center>

البته یک روش دیگر نیز برای این کار وجود دارد که درست مانند تگ Center منسوخ شده؛ اما در موارد ضروری می‌تواند مورداستفاده قرار بگیرد. با استفاده از صفت Align و قرار دادن مقدار Center نیز می‌توانید تصاویر خود را در Html وسط چین کنید.

وسط چین کردن افقی و عمودی عکس در HTML

اما در مواردی، نیاز داریم یک تصویر را هم به صورت افقی و هم به صورت عمودی وسط چین کنیم. برای این کار می‌توانیم از قطعه کد زیر استفاده کنیم.

<div class="verticalhorizontal">
    <img src="image.jpg" alt="centered image"/>
</div>
<style>
.verticalhorizontal {
display: table-cell;
height: 300px;
text-align: center;
width: 300px;
vertical-align: middle;
}
</style>

در این کد چند ویژگی اضافی وجود دارد که بهتر است با آنها آشنا شوید:

  • مقدار Display: Table-cell عنصر را مانند یک سلول جدول نمایش می دهد.
  • مقادیر Height و Width به ترتیب ارتفاع و عرض تصویر را مشخص می‌کنند.
  • مقدار Vertical-Align: Middle به ترازبندی عمودی اشاره دارد و در کنار Text-Align: Center وظیفه ترازبندی افقی و عمودی تصویر را برعهده دارند.

نکته مهم: از دستور Vertical-Align: Middle به تنهایی برای ترازبندی عمودی عناصر هم می‌توانید استفاده کنید.

اموزش html

وسط چین کردن متن در HTML

فرآیند وسط چین کردن متون در Html نیز شباهت زیادی به روش‌های گفته شده برای وسط چین کردن عکس‌ها دارد. شما می‌توانید با استفاده از روش‌های زیر، کد وسط چین کردن متن در HTML را بنویسید. تنها تفاوت در این بخش، این است که تگ img که برای قرار دادن تصاویر مورداستفاده قرار می‌گرفت، یک تک Inline است؛ در صورتی که تگ P و H1…H6 که برای نوشتن متن بکار می‌روند، از نوع Block هستند. البته به طور کلی می‌توان در هر نوع تگ، از متن‌ها استفاده کرد؛ همین موضوع باعث شده در مواردی نیاز به تبدیل تگ‌های Inline به Block داشته باشیم.

روش‌های وسط چین کردن متن در صفحات وب را در ادامه می‌بینید:

1| استفاده از دستورات CSS برای ترازبندی

2| تبدیل تگ به Block (در برخی موارد)

3| استفاده از تگ Center

کد وسط چین کردن متن در Html با استایل‌دهی

اولین روش برای قرار دادن متن‌ها در وسط صفحه در Html استفاده از ویژگی Text-Align در CSS است. برای این کار، مطابق کد زیر عمل می‌کنیم.

<p> html کد وسط چین متن در </p>
<style>
p{
text-align: center;
}
</style>

در ابتدا یک تگ P تعریف می‌کنیم و در بخش استایل، برای آن از ویژگی text-align: center; استفاده می‌کنیم. با توجه به اینکه ما خاصیت وسط چین شدن را برای تگ p تعریف کرده‌ایم، در صورتی که تعداد دیگری از این تگ نیز داشته باشیم به صورت وسط چین نمایش داده می‌شوند.

برای رفع این مشکل، ابتدا باید تگ‌های موردنیاز خود را تعریف کنیم و در ادامه، آن عنصر که باید به صورت وسط چین نمایش داده شود را با استفاده از یک کلاس یا ID مشخص کنیم. در ادامه نیز با استفاده از CSS آن را وسط چین کنیم. قطعه کد زیر را برای درک بهتر این موضوع ببینید.

<p Class="Align-center"> html کد وسط چین متن در </p>
<p> html کد وسط چین متن در </p>
<p> html کد وسط چین متن در </p>
<style>
.Align-center {
text-align: center;
}
</style>

با استفاده از کد وسط چین کردن متن در Html بالا، می‌توانید هر متنی که نیاز به وسط چین شدن دارد را با استفاده از کلاس Align-center وسط چین کنید. باقی تگ‌ها به صورت عادی و بدون ترازبندی نمایش داده می‌شوند.

تبدیل تگ‌های Inline به Block

شاید بپرسید تگ‌های P و H1 تا H6 و سایر تگ‌هایی که برای نوشتن متن استفاده می‌شوند، همگی از نوع Block هستند؛ پس این روش به چه دردی می‌خورد؟

در مواردی، نیاز به نوشتن متن در تگ‌هایی داریم که ذاتا Block نیستند؛ برای مثال تگ Span که یکی از تگ‌های پراستفاده در کدنویسی به زبان Html محسوب می‌شود. در صورت استفاده از این تگ یا سایر تگ‌های Inline باید آنها را به تگ Block تبدیل کنیم و سپس، عمل وسط چین کردن را روی آنها انجام دهیم.

برای این کار، در بخش استایل‌های این تگ یا کلاس تعریف شده برای آن، ویژگی Display: Block; را مشابه کد زیر اضافه کنید. البته در این کد، ما کلاسی به نام Align-center تعریف کردیم و با استفاده از سلکتورها در CSS به آن استایل دادیم.

<span class="align-center"> کد وسط چین کردن متن</span>
.align-center {
display: block;
text-align: center;
}

کد وسط چین کردن عکس در Html با تگ Center

در انتها، اگر هیچکدام از روش‌های گفته شده در بالا قابل استفاده نبود یا کار نکرد، می‌توانید از تگ Center برای وسط چین کردن متن در Html استفاده کنید. این تگ، در Html 5 منسوخ شده و بهتر است از آن استفاده نکنید؛ با این وجود در موارد ضروری یا موقت می‌توانید آن را مورداستفاده قرار دهید.

برای استفاده از این تگ، نیازی به نوشتن هیچ دستور CSS وجود ندارد؛ تنها عنصر Html موردنظر خود را مشابه کد زیر درون تگ <Center> قرار دهید تا به صورت وسط چین نمایش داده شود.

<center> <p> قرار دادن متن به صورت وسط چین </p> </center>

چطور می‌توانم Html را اصولی یاد بگیرم؟

یادگیری زبان HTML اولین قدم برای ورود به دنیای طراحی وب محسوب می‌شود و در کنار CSS پایه اصلی صفحات وب را تشکیل می‌دهند. بنابراین اگر می‌خواهید وارد حوزه برنامه نویسی وب شده و به عنوان توسعه دهنده فرانت اند فعالیت کنید، حتما باید به این دو زبان تسلط داشته باشید.

دوره رایگان مقدماتی تا پیشرفته Html در کنار دوره جامع آموزش CSS رایگان سبزلرن، به شما کمک می‌کنند شروع قدرتمند و محکمی در مسیر تبدیل شدن به یک طراخ Front-end داشته باشید. این دوره‌ها، پیش‌نیاز اصلی فعالیت در زمینه فرانت اند هستند و پشتیبانی رایگان و مادام العمر نیز توسط مدرس دوره به دانشجویان ارائه می‌شود.

با شرکت در دوره رایگان مقدماتی تا پیشرفته HTML سبزلرن، به دنیای پر رمز و راز طراحی وب قدم بگذارید و صفحات وب خود را خلق کنید. در ادامه با شرکت در دوره جامع آموزش CSS رایگان سبزلرن، صفحات خود را با استفاده از دستورات CSS زیبا و خاص کنید! سبزلرن تا انتهای این مسیر همراه شماست!

اموزش html

سوالات متداول

چطور یک عکس را در جدول وسط چین کنیم؟

برای این کار شما می‌توانید از صفت alignment در تگ <table> استفاده کنید؛ ولی این صفت از نسخه‌ی پنج html منسوخ شده و توسط برخی مرورگرها پشتیبانی نمی‌شود. بنابراین بهتر است برای این کار از دستورات Css به همان نحوی که در مقاله توضیح داده شد، استفاده کنید.

چطور دکمه‌ها و نوشته‌ها را در یک جدول وسط چین کنیم؟

همانطور که در مقاله اشاره کردیم شما می‌توانید با کمک دو روش زیر استایل دکمه‌ها را برای وسط چین تنظیم کنید:

  1. با استفاده از text-align: مقدار این ویژگی را در تگ <div> برابر با center قرار دهید.
  2. با استفاده از margin: مقدار ویژگی margin را به auto تغییر دهید.

نظرات

ثبت نظر جدید

نظری برای این مقاله ثبت نشده است