استفاده از کد وسط چین عکس در Html و همچنین کد وسط چین کردن متن در html یکی از مباحث مهمی است که باید یاد بگیرید. ترازبندی و موقعیت یابی تصاویر و المان‌های صفحه در html، برای نظم صفحات و زیبایی ظاهری اهمیت زیادی دارند.

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

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

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

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

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

همانطور که گفتیم برای وسط چین کردن عکس در html شما می‌توانید به چندین روش عمل کنید. قرار دادن یک عکس در وسط صفحات وب شاید چندان سخت به نظر نرسد؛ ولی از آنجایی که تگ <img> یک المنت inline محسوب می‌شود، رفتاری متفاوت با یک المنت بلاکی دارد و تخصیص ویژگی به آن شاید کمی پیچیده‌تر باشد.

حتما میدانید که منظور از المنت inline تمامی المان‌هایی است که در یک خط افقی کنار هم قرار می‌گیرند و بخشی از یک خط را اشغال می‌کنند. ولی یک المنت بلاکی به المانی گفته می‌شود که یک ردیف افقی را کامل می‌گیرد. بعضی از روش‌ها برای پیاده سازی کد وسط چین عکس در Html یا css نیاز به تعریف ویژگی‌های بیشتری دارند و بعضی کمتر. به طور کلی شما می‌توانید به سه روش زیر این کار را انجام دهید:

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

با این روش شما می‌توانید از صفت‌های alignment در استایل Css برای وسط چین کردن عکس استفاده کنید. برای این کار می‌توانید به راحتی با کد زیر تصویرتان را وسط چین کنید:

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

همانطور که مشاهده می‌کنید در این کد استایل به صورت inline نوشته شده است. در صورتی‌که بخواهید یک عکس در صفحه را وسط چین کنید، این کار درست است؛ ولی اگر چندین عکس دارید که می‌خواهید به این روش وسط چین کنید، بهتر است یک کلاس استایل جدا بسازید و برای کل عکس‌ها از همان استفاده کنید. مشابه کد زیر:

<p class="aligncenter">
    <img src="image.jpg" alt="centered image" />
</p>

<style>
.aligncenter {
    text-align: center;
}
</style>

خب همانطور که می‌بینید ما یک صفت داریم تحت عنوان     text-align که مقدار آن را center یعنی مرکز قرار داده‌ایم و با کمک آن تصویر ما به صورت وسط چین نمایش داده می‌شود. حال فرض کنید به جای تگ <p> از <div> استفاده می‌کردیم. این کار ممکن است نمایش متفاوتی داشته باشد؛ چون margin در تگ <div> متفاوت است و ممکن است نیاز به تنظیم این صفت نیز داشته باشید.

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

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

<div> 
    <img class=" centerImage " src="image.jpg" alt="centered image" />
 </div>

<style type="text/css">

 .centerImage { 

 text-align:center; 

 display:block;

 }

 </style>

همانطور که مشاهده می‌کنید تصویری با عتوان image.jpg در صفحه قرار گرفته که برای آن یک کلاس استایل ساخته شده است. در این کد با استفاده از صفت text-align در کلاس استایل، عکس در وسط صفحه تنظیم شده است. شما می‌توانید به جای این صفت از margin نیز استفاده کنید. برای این کار کافی است مقدار میانی مارجین را auto قرار دهید تا عکس در وسط صفحه قرار بگیرد. مثال:

<div>
    <img class="marginauto" src="image.jpg" alt="centered image" />
</div>

<style>
.marginauto {
    margin: 10px auto 20px;
    display: block;
}
</style>

کد وسط چین عکس در Html با استفاده از تگ <center>

شما می‌توانید با قرار دادن تگ <img> داخل تگ <center> نیز تصویرتان را وسط چین کنید. این روش فقط برای تصاویر در صفحات وب کاربرد دارد. دقت کنید که این روش در html5 منسوخ شده و ممکن است بعضی از مرورگرها نتوانند این کد را اجرا کنند. البته مرورگری مثل کروم هنوز هم این روش را پشتیبانی می‌کند.

مزیت این روش این است که از هیچ استایلی استفاده نمی‌کند و فقط کدهای html استفاده می‌شود. با این وجود در صورتی از این روش استفاده کنید که هیچ کدام از روش‌های دیگر عملیاتی نبود. برای این کار عملیات خاصی لازم نیست؛ فقط کافیست تصویر را داخل تگ سنتر بگذارید. مثال:

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

کد وسط چین عکس در Html با استفاده از صفت Align: این روش هم مثل روش قبلی نیازی به هیچ استایلی ندارد و در نسخه‌های مختلف html هم قابل اجراست. برای این کار کافی است مقدار صفت align در تگ img را برای وسط تنظیم کنید. مثال :

<img align="middle" src="image.jpg" alt="myimage" />

همان‌طور که ملاحظه می‌کنید با یک خط کد ساده، شما توانستید برای تصویرتان ترازبندی middle یعنی وسط را انتخاب کنید.

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

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

<div class="verticalcenter">
    <img src="image.jpg" alt="centered image" />
</div>

<style>
.verticalcenter {
    display: table-cell;
    height: 400px;
    vertical-align: middle;
}
</style>

در این کد ما یک سلول جدول به کمک دستور  display: table-cell  برای تصویر خودمان تعریف کردیم و به آن ارتفاع 400

پیکسل اختصاص دادیم. سپس با دستور vertical-align: middle عکس خودمان را در وسط این ارتفاع قرار دادیم.

کد وسط چین افقی و عمودی عکس در Html با استفاده از استایل

در مثال قبلی فرض کنید بخواهیم تصویر را هم به صورت افقی و هم عمودی همزمان در وسط صفحه تراز کنیم. برای این کار هم باید از دستور استایل استفاده کنیم. باز هم در کلاس استایل برای ترازبندی از سلول جدول استفاده می‌کنیم و برای طول و ارتفاع آن مقدار تعیین کرده و بعد به آن alignment اختصاص دهیم. کد زیر نحوه‌ی انجام این کار را نشان می‌دهد:

<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>

همان‌طور که در کد ملاحظه می‌کنید، ما یک سلول جدول به طول و ارتفاع 300 پیکسل تعریف کردیم. سپس با دستور     text-align: center تصویر را به صورت افقی و با دستور  vertical-align: middleتصویر را به صورت عمودی در این سلول وسط چین می‌کنیم.

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

استفاده از کد وسط چین کردن متن در Html یکی از مباحث مهم است. روش هاي مختلفی برای وسط چین کردن متن وجود دارد که شما می توانید این کار را به روش های مختلفی انجام دهید.

یکی از این روش ها به صورت inline که به معنی “داخل خط” است، می باشد. یعنی ما ویژگی های موردنیاز را داخل هر خط از کدهای html مینویسیم.

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

<body>

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

</body>

همانطور که مشاهده می کنید در این کد استایل به صورت inline نوشته شده است.

اگر چندین متن دارید که می‌خواهید به این روش وسط چین کنید، بهتر است یک کلاس استایل جدا بسازید و برای کل متن ها از همان استفاده کنید که به این روش internal گفته می شود. مشابه کد زیر:

<body>

    <p>html کد وسط چین متن در </p>

    <p>html کد وسط چین متن در </p>

    <p>html کد وسط چین متن در </p>

    <p>html کد وسط چین متن در </p>

</body>

<style>

        p{

            text-align: center;

        }

    </style>

همانطور که میبینید با استفاده از تگ style و text-align: center تمامی تگ های p را وسط چین کردیم.

ولی اگر بخواهید تنها یکی از تگ هارا استایل دهی بکنید میتوانید برای تگ مورد نظر اسم class مشخص کنید و به همین روش

متن را وسط قرار دهید. مشابه کد زیر:

<body>

    <p class="aligncenter">html کد وسط چین متن در </p>

    <p>html کد وسط چین متن در </p>

    <p>html کد وسط چین متن در </p>

    <p>html کد وسط چین متن در </p>

</body>

<style>

        .aligncenter{

            text-align: center;

        }

    </style>

در کد بالا فقط تگی که با کلاس aligncenter نام گذاری شده است وسط چین خواهد شد.

در روش internal تگ هایی که display شان برابر با block است امکان تعریف text-align  برایشان وجود دارد. در این مواقع باید display تگ موردنظر را block نوشت و سپس از text-aling استفاده کرد.

<body>  

    <span>html کد وسط چین متن در</span>    

</body>

<style>

    span{

        display: block;

        text-align: center;

    }

 </style>

چون در کد بالا display تگ span، inline است پس به block تبدیل می کنیم.

روش دیگر external نام دارد که در این روش ما از کدهای css برای وسط چین کردن متن استفاده می کنیم.

در فایل  html متن و کلاس موردنظر را نوشته و در فایل css با استفاده از text-align: center; تگ موردنظر را وسط چین قرار می دهیم.

روش دیگر برای وسط چین کردن متن استفاده از تگ center در html است.

<body>  

    <p><center>html کد وسط چین متن در </center></p>

</body>

با استفاده از کد بالا متن موردنظر وسط چین خواهد شد. دقت کنید که این روش در html5 منسوخ شده و ممکن است بعضی از مرورگرها نتوانند این کد را اجرا کنند. البته مرورگری مثل کروم هنوز هم این روش را پشتیبانی می‌کند. مزیت این روش این است که از هیچ استایلی استفاده نمی‌کند و فقط کدهای html استفاده می‌شود. با این وجود در صورتی از این روش استفاده کنید که هیچ کدام از روش‌های دیگر قابل استفاده نباشد. برای این کار عملیات خاصی لازم نیست؛ فقط کافیست تصویر را داخل تگ سنتر بگذارید.

در این مقاله انواع روش ‌های وسط چین کردن متن در html را بررسی کردیم و دیدیم که برای این کار هم می‌توانید از خود کدهای html استفاده کنید و هم می‌توانید دستورات استایل در Css را به کار ببرید. استفاده از تگ <center> اگرچه کد کمتری دارد؛ ولی برای تمام مرورگرها کاربردی نیست و بهتر است از کلاس‌ های استایل Css برای تعریف کد وسط چین متن در Html استفاده کنید.

حرف آخر

در این مقاله انواع روش‌های وسط کردن عکس در html را بررسی کردیم و دیدیم که برای این کار هم می‌توانید از خود کدهای html استفاده کنید و هم می‌توانید دستورات استایل در Css را به کار ببرید. استفاده از تگ <center> اگرچه سربار کد کمتری دارد؛ ولی برای تمام مرورگرها کاربردی نیست و بهتر است از کلاس‌های استایل Css برای تعریف کد وسط چین عکس در Html استفاده کنید.

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

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

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

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

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

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