د سینتیوب انځورونو او نور ایچ ٹی ایم ایل توکي ته سی ایس ایس وکاروئ

مرکزونه انځورونه، متن، او د ویب پاڼې جوړولو په وخت کې د بلاک عناصر

که تاسو د ویب پاڼې جوړولو لپاره څنګه زده کړه کوئ، یو ترټولو معمول چالونه چې تاسو یې ماسټر ته اړتیا لرئ د براؤزر په کړکۍ کې د مرکزي توکو څرنګوالي ته. دا پدې معنا لري چې په پاڼه کې د انځور مرکز کولی شي، یا دا د ډیزاین د یوې برخې په توګه د سرلیکونو منځګړیتوب د مرکز توجیه کولی شي.

د مرکزي انځورونو یا متن یا حتی ستاسو ټول ویب پاڼې د لیدلو لپاره مناسبه لاره د Cascading Style Sheets (CSS) څخه کار اخلئ. د مرکز کولو لپاره ډیری ځانګړتیاوې د 1.0 نسخه څخه CSS کې دي، او دوی د CSS3 او عصري ویب براؤزرونو سره خورا ښه کار کوي.

د ویب ډیزاین د ډیری اړخونو په څیر، په ویب پاڼه کې د سی ایس ایس کاروونکو کارولو لپاره ډیری لاری شتون لري. راځئ چې د دې بصري نظر د ترلاسه کولو لپاره د سی ایس ایس کارولو لپاره ځینې مختلفې لارې وګورو.

په HTML کې د مرکز عناصر ته CSS استعمال کول په نظر کې

د سی ایس ایس سره مرکز کول کیدای شي د ویب پایلي ډیزاین لپاره یو ننګونې وي ځکه چې د دې یو بصری سټایل بشپړولو لپاره ډیری بیلابیل لارې شتون لري. په داسې حال کې چې د مختلفو طریقو ښایي ښایي ښه وي یا پرمختللي ویب پاڼې جوړونکي چې پوه شي چې ټول تخنیکونه په هر عنصر کې کار نه کوي، دا د نوو ویب پرسونل لپاره د مختلفو میتودونو له امله ډیرې ننګونې کیدی شي دا معنی لري چې پوهیږي کله چې کوم طریقه کارول کیږي. تر ټولو غوره کار د څو څو اړخونو پوهاوې ترلاسه کول دي. لکه څنګه چې تاسو د دوی کارولو پیل کوئ، نو تاسو به زده کړئ چې کومه طریقه په کوم حالت کې ښه کار کوي.

په لوړه کچه، تاسو کولی شئ چې سی ایس ایس کاروئ:

ډیری (ډیری) کاله دمخه، د ویب ډیزاینرانو کولی شو د <مرکز> عنصر د مرکز انځورونو او متنونو څخه کار واخلئ، مګر دا ایچ ٹی ایم ایل عنصر اوس بې ځایه شوی او نور په عصري ویب سایټونو کې ملاتړ نه کوي. دا پدې مانا ده چې تاسو باید د دې HTML عنصر کارولو څخه ډډه وکړئ که تاسو غواړئ خپل پاڼې د سمو معیارونو سره سم سمبال او سمبال کړئ! د دې عنصر ویجاړ دلیل دلیل دی، په لویه برخه کې، ځکه چې عصري ویب پاڼې باید د جوړښت او ډول روښانه څرګند جلا وي. HTML د جوړښت په جوړولو کې کارول کیږي پداسې حال کې چې سی ایس ایس جوړوي. ځکه چې مرکزیت د یو عنصر یو بصری خصوصیت دی (دا د هغه څه په پرتله چې څنګه وي) وګورئ، دا ډول ډول سیسټم د سی ایس ایس سره سمبال شوی، ایچ ٹی ایم ایل نه دی. دا ځکه چې د HTML جوړښت کې د <مرکز> ټګ اضافه کول د عصري ویب سایټونو له مخې ناسم دی. پرځای یې، موږ به سی ایس ایس ته ورسوو ترڅو خپل عناصر ښایسته او منځګړیتوب ترلاسه کړي.

د سي ایس ایس سره د مرکز کولو متن

په ویب پاڼه کې مرکز ته ترټولو اسانه شی متن دی. یوازې یو ډول ډول شتمنۍ شتون لري تاسو اړتیا لرئ چې دا کار وکړئ: متن - نښه کړئ. لاندې د سی ایس ایس طرزالعمل واخلئ، د مثال په توګه:

p.center {متن - نښه: مرکز؛ }

د سی ایس ایس اس اس لین سره، هرې پراګراف به د مرکز ټولګي سره لیکل کیږي په افقی ډول به په خپل پلار عنصر کې ځای شي. د مثال په توګه، که چیرې پیراګراف د ویش دننه وي، پدې مانا چې دا د دې فرق یو ماشوم و، دا به په افقی ډول په

کې ځای پر ځای شي.

دلته د دې ټولګي یوه بیلګه د HTML سند کې پلي کیږي:

دا متن مرکز دی.

کله چې د متن په نښه کولو ملکیت سره متن منځته راوړل، په یاد ولرئ چې دا به د هغه عنصر دننه کې مربوط وي او په حتمي توګه په بشپړه پاڼه کې دننه نه وي. په یاد ولرئ چې د مرکز مستحق متن د محتوياتو لوی لوی بلاکونو لپاره لوستل ستونزمن کار دی، له دې امله دا انداز په روښانه ډول کارول. سرلیکونه او د متن کوچنۍ بلاکس، لکه د مضمون یا نورو محتویاتو لپاره د تیزر متن، کله چې مرکز، مګر د متن لوی لوی بلاکونه، د بشپړ مضمون په څیر، د مصرف کولو لپاره ستونزمن وي کله چې محتويات په بشپړ ډول مرکز و ثابت شوی. په یاد ولرئ، کله چې دا د ویب پاڼې متن ته راځي نو د لوستلو وړتیا تل کلیدی وي !

د سی ایس ایس سره د منځپانګې مرکزونو بلاکونه

بلاکونه ستاسو په پاڼه کې کوم عناصر دي چې تعريف شوي چوک لري او د بلاک د کچې عنصر په توګه جوړ شوی. ځینې ​​وختونه، دا بلاکس د HTML

عنصر په کارولو سره رامنځته کیږي. د سی ایس ایس سره د بلاکونو مرکز کولو لپاره ترټولو عامه لاره دا ده چې ښي او ښي لوري دواړو ته د آٹو لپاره ترتیب کړئ. دلته دلته د ویش لپاره سی ایس ایس دی چې د "مرکز" کلاس ځانګړتیا لري د دې لپاره تطبیق کیږي:

div.center {
حاصله: 0 خود؛
چوکۍ: 80em؛
}

د سی ایس ایس شتمني به د حاصالتو ملکیت لپاره به د لوړ او ټیټ حاالتو د ارزښت ارزښت په ګوته کړي، پداسې حال کې چې ښي او ښي خوا به "آٹو" کاروي. دا اړینه ده چې هغه ځای چې شتون ولري شتون ولري او د لیدپورت کړکۍ د دواړو خواوو ترمنځ مساوي وي، په اغیزمنه توګه د پاڼې عنصر تمرکز کوي.

دلته دا په HTML کې کارول کیږي:

دا ټول بلاک مرکز دی،
مګر د دننه متن دننه پاتې شوی دی.

څومره چې ستاسو بلاک د تعریف شوي چوکۍ درلودونکی وي، نو دا به د ځان سره د عناصر دننه منځ ته راشي. په دې بلاک کې مشتمل متن به د هغې دننه متمرکز نشي، مګر به پریښودل شي. دا د دې لپاره چې متن په ویب براوزرونو کې په ډیزاین کې پریښودل کیږي - پریښودل کیږي. که تاسو غواړئ چې متن هم په پام کې ونیول شي، تاسو کولی شئ د متن-قطعیت ملکیت څخه چې موږ یې د دې ویش سره په ګډه د ویش مرکز کې د پوښښ سره مخ وکاروو.

د سین ایس ایس انځورونو سره مرکزونه

پداسې حال کې چې ډیری برګزونه به ورته انځورونه وکاروي چې د ورته متن سره ورته وي - موږ د پیراګراف لپاره ولیدل، دا ښه نظر نه دی چې پدې تخنیک باندې تکیه وکړي ځکه چې دا د W3C لخوا سپارښتنه نه کیږي. ځکه چې دا سپارښتنه نه کیږي، تل داسې یو فرصت وي چې د براؤن راتلونکي راتلونکي کولی شي پدې طریقه توقیف کړي.

په انځور کې د متن په نښه کولو کارولو پر ځای، تاسو باید په ښکاره توګه براؤزر ته ووایاست چې تصویر د بلاګ کچې کچه عنصر دی. دا طریقه، تاسو کولی شئ هغه مرکز ولرئ کله چې تاسو بل بل بلاک ولرئ. دلته دا سیشن سی ایس ایس دی:

img.center {
ښودنه: بندیز؛
مارډین - بکس: آٹو؛
منځنی - حق: خپلواکی؛
}

او دلته دا HTML دی چې د هغه تصویر لپاره چې موږ یې غواړو مرکز ته ورسوو:

تاسو کولی شئ د انلاین سی ایس ایس کاروونکي کاروونکي وساتئ (لاندې وګورئ)، مګر دا تګلاره سپارښتنه نه کیږي ځکه چې دا د بڼې شاليدونه په HTML بڼه کې اضافه کوي. په یاد ولرئ، موږ طرز او جوړښت جلا کړو، له دې امله د سی ایس ایس شاليدونه ستاسو د ایچ ایچ ایل کوډ کې اضافه کړئ چې مات کړئ او لکه څنګه چې دا ممکنه وي باید له پامه غورځول شي.

>

د سی ایس ایس سره عمودی ډول مرکزونه

مرکزي مرکزونه عمودی ډول په ویب ډیزاین کې تل ستونزمن شوي، مګر په CSS3 کې د سی ایس ایس لچک وړ بکس لیډ ماډل د خوشې کولو سره، اوس دا کار کولو لاره ده.

عمودی کرښه په ورته ډول د افقی قطارونو سره کار کوي چې پورته پوښل شوی. د سی ایس ایس ملکیت د عمودی ارزښت سره د عمودی - سایټ دی.

.ccenter {
عمودی کرښی: منځنی؛
}

د دې تګالرې برعکس دا دی چې ټولې براؤزرونه د CSS فکس بوکس ملاتړ نه کوي، که څه هم ډیر نور د دې نوي CSS CSS ترتیب کولو لپاره راځي! په حقیقت کې، نن ورځ ټول جدید عصري براؤزرونه د دې ایس ایس ایس سټایل ملاتړ کوي. دا پدې مانا ده چې ستاسو یوازې یوازې د فلیکس بوکس سره اندیښنه به د زاړه براؤزر نسخه وي.

که تاسو د پخوانی براؤزرونو سره مسله لرئ، W3C سپارښتنه کوي چې تاسو په یو کانتینر کې عمودی ډول د متن متن په لاندې طریقه کارولو:

  1. هغه عناصر په پام کې ونیسئ چې دننه عنصر پکې شامل وي لکه دیوال.
  2. د عنصر په اړه لږ تر لږه مقرر کړئ.
  3. د هغه عنصر بیان کړئ چې د میز میز په حیث.
  4. عمودی قطار "منځنی" ته وټاکئ

د بېلګې په توګه، دلته سی ایس ایس دی:

.ccenter {
Min-height: 12em؛
ښودل: د میز میز
عمودی کرښی: منځنی؛
}

او دلته دا HTML دی:


دا متن په عمودی ډول په بکس کې منځ ته راغلی دی.

عمودی مرکزونه او د انټرنیټ انټرنیټ پخوانی ورژن

د انټرنیټ اکسپلورر (IE) مرکز ته مرکز کولو لپاره ځینې لارې شتون لري او بیا د شرطي تبصرو څخه کار واخلئ ترڅو یوازې د IE ډولونه وګورئ، مګر دوی یو څه تشریح او بد ډول دي. ښه خبر دا دی چې د IE سره د پخوانی نسخو مالتړ لپاره د کمیدو لپاره، د غیرمعلوماتي براؤزرونو باید په چټکۍ سره په لاره کې وي، د ویب ډیزاینرانو لپاره د اسانه کولو ترتیباتو کارولو په اسانۍ سره د سی ایس ایس فاکس بوکس کارول آسانه کوي کوم چې به د سی ایس ایس ترتیبات جوړ کړي، نه یواځې مرکز کول، د ټولو ویب ډیزاینرانو لپاره ډیر اسانه.