ترفند های وسط چین کردن انواع تگ های Html

یکی از مسائل مهم و گیج کننده برای بعضی از طراحان وب سایت , موضوع وسط چین کردن تگ های html به بهترین نحو ممکن می باشد .

راه های بسیار زیادی در این ضمینه گفته میشود که بعضی از آنها قدیمی و منسوخ شده و بعضی از آنها غیر استاندارد می باشد . سعی دارم در این پست بهترین روش های وسط چین کردن تگ ها رو برای شما عزیزان آموزش دهم .

توجه فرمایید که بنده در این پست فقط راه های استاندارد رو بیان میکنم …

ترفند 1 : برای وسط چین کردن تگ های نوشتاری ( از جمله p,b,u,i,h1,h2,h3,h4,h5,h6 و … ) , کافیست در css به آن text-align:center دهیم .

<p style="text-align:center">Vahid Majidi</p>

ترفند 2 : برای وسط چین کردن تگ های Inline Level ( از جمله img,label,input,video,audio و … ) , کافیست آنها را در داخل تگ p ( پاراگراف ) انداخته و به تگ پاراگراف text-align:center دهیم .

<p style="text-align:center"><img src="vms.jpg" alt="Vahid Majidi"></p>

 ترفند 3 : برای وسط چین کردن تگ های Block Level ( از جمله div,table,hr و … ) , کافیست در Css ابتدا به آنها یک width مشخص داده , سپس margin-left و margin-right آن را Auto قرار دهیم .

<div style="width:200px;margin-left:auto;margin-right:auto">
    Vahid Majidi
</div>

 نکته 1 : اگر با اصطلاحات Block Level و Inline Level آشنایی ندارید , اینجا کلیک کنید .

نکته 2 : ترفند های بالا فقط قادر به وسط چین کردن در حالت افقی هستند و هنور راح حل مناسبی برای وسط چین کردن در حالت عمودی در طراحی وب معرفی نشده است بجز ترفند زیر …

ترفند 4 : در این ترفند هم قادر به وسط چین کردن در حالت افقی میباشید و هم در حالت عمودی …

به این ترتیب که شما میتوانید با دادن یک position به تگ مورد نظر و انجام مراحل زیر این کار را انجام دهید .

ابتدا یکی از مقادیر fixed , relative و یا absolute را انتخاب نموده که هر کدام کار خاصی را انجام میدند . مثلا اگر fixed را انتخاب نمایید , تگ شما در صفحه مرورگر ثابت و بی حرکت میشود . ( ترجیحا absolute استفاده نمایید )

حال اگر میخواهید به صورت افقی وسط چین نمایید , کافیست مقدار پراپرتی left را %50 انتخاب کرده , سپس margin-left را به مقدار نصف width تگ مورد نظر اما به صورت منفی مقدار دهی نمایید .

<div style="width:400px;position:absolute;left:50%;margin-left:-200px">
    Vahid Majidi
</div>

و یا اگر میخواهید به صورت عمودی وسط چین نمایید , کافیست مقدار پراپرتی top را %50 انتخاب کرده , سپس margin-top را به مقدار نصف height تگ مورد نظر اما به صورت منفی مقدار دهی نمایید .

<div style="height:400px;position:absolute;top:50%;margin-top:-200px">
    Vahid Majidi
</div>

 نکته 1 : ما اکثرا سایت را بر اساس پراپرتی Float در css میسازیم . به همین دلیل استفاده نادرست و کم دقتی در ترفند شماره 4 , میتواند دیزاین سایت را بهم ریخته و مشکلاتی پدید آورد .

نکته 2 : استفاده از تگ هایی مانند center و یا خاصیت align در html , منسوخ شده و 4 روش بالا بهترین روش ها برای وسط چین کردن میباشند .

نکته 3 : سعی کنید برای وسط چین کردن در حالت عمودی , به صورت چشمی و تجربی با دادن پراپرتی margin-top به تگ مورد نظر کار خود را انجام دهید و کمتر از ترفند 4 برای این کار استفاده نمایید ( مگر اینکه آشنایی کامل با Position ها داشته باشید ) .

آموزش : وحید مجیدی

پخش اختصاصی