آموزش کامل و انواع وسط چین در html

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

این آموزش یکی از مباحث اصلی دوره آموزش html وب سایت سبز لرن می باشد که در طول دوره به طور کامل به آن پرداخته شده است.

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

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

انواع وسط چین در html

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

آموزش وسط چین کردن عکس در 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 را بنویسید. تنها تفاوت در این بخش، این است که تگ img که برای قرار دادن تصاویر مورداستفاده قرار می‌گرفت، یک تک Inline است؛ در صورتی که تگ P و H1…H6 که برای نوشتن متن بکار می‌روند، از نوع Block هستند. البته به طور کلی می‌توان در هر نوع تگ، از متن‌ها استفاده کرد؛ همین موضوع باعث شده در مواردی نیاز به تبدیل تگ‌های Inline به Block داشته باشیم.

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

• استفاده از دستورات CSS برای ترازبندی
• تبدیل تگ به Block (در برخی موارد)
• استفاده از تگ 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>

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