كيفية توسيط الروابط في CSS

Kyfyt Twsyt Alrwabt Fy Css

يتم عرض أي عنصر نضيفه في HTML في الزاوية العلوية اليسرى من الشاشة افتراضيًا. على الرغم من أنه يمكنك تعديل الموضع الافتراضي لعنصر ما باستخدام خصائص CSS مختلفة. وبالمثل ، عندما نضيف رابطًا ، يتم عرضه في موضعه الافتراضي ، ولكن يمكنك توسيط محاذاته باستخدام خصائص CSS.

هناك طريقتان لتوسيط الرابط:

في هذه المقالة ، سنشرح كلا الطريقتين لتوسيط الرابط. دعنا نبدأ!



الطريقة الأولى: توسيط الروابط في CSS باستخدام خاصية محاذاة النص

لتوسيط الروابط في HTML ، سنستخدم ' محاذاة النص 'من CSS. ال ' محاذاة النص 'في CSS لضبط محاذاة النص مثل اليسار واليمين والوسط وتبرير المحاذاة.



بناء الجملة



بناء جملة خاصية محاذاة النص هو:

محاذاة النص : القيمة

في مكان ' القيمة '، يمكنك ضبط محاذاة النص مثل اليسار واليمين والوسط والضبط.

الآن ، سوف نستخدم ' محاذاة النص 'لتوسيط محاذاة الروابط المعينة.



مثال

لتوسيط رابط على صفحة ويب ، سنضيف ارتباطًا بتنسيق HTML داخل علامة . للقيام بذلك ، استخدم علامة لتحديد ارتباط تشعبي وإعطاء عنوان الموقع المطلوب. بعد ذلك ، حدد اسم الارتباط. في حالتنا ، أضفنا الرابط إلى موقع Linuxhint الخاص بنا.

لغة البرمجة

<
هيئة >

< أ href = 'https://linuxhint.com/' > لينكس < / أ >

< / هيئة >

تشير الصورة المعروضة أدناه إلى إضافة الارتباط الذي يتم وضعه على الجانب الأيسر افتراضيًا:

انتقل الآن إلى CSS لتوسيط الرابط.

هنا ، سوف نستخدم ' أ 'للوصول إلى الرابط المضاف. بعد ذلك ، قم بتعيين قيمة محاذاة النص على أنها ' المركز وعرض كـ ' الكتلة '. نتيجة لذلك ، ستتم إضافة العنصر كعنصر كتلة ، بدءًا من سطر جديد ويأخذ العرض بالكامل.

CSS

أ {

محاذاة النص : المركز ؛

عرض : الكتلة ؛

}

ملحوظة: لا تعمل خاصية محاذاة نص CSS وحدها لتوسيط العلامة. لذلك ، يجب عليك استخدام ' عرض 'وتعيين قيمته' الكتلة 'لتوسيط الارتباط.

الآن ، انتقل إلى HTML وقم بتنفيذه لرؤية النتيجة التالية. هنا ، يمكنك أن ترى أن الارتباط محاذي في وسط صفحة الويب:

دعنا ننتقل إلى الطريقة الثانية لمحاذاة الرابط في المركز.

الطريقة 2: توسيط الروابط في CSS باستخدام خاصية 'الهامش'

في CSS ، ' حافة 'يتم استخدام الخاصية لتوسيط الرابط. إنها خاصية الاختزال لـ ' الهامش الأيسر '،' الهامش الأيمن '،' الهامش العلوي '، و ' الهامش السفلي ' الخصائص. يمكنك تعيين قيم جميع الخصائص المحددة في سطر واحد.

بناء الجملة

بناء جملة خاصية الهامش هو:

حافة : تلقاءي | أعلى حقا الأسفل اليسار

فيما يلي وصف بناء الجملة المذكور أعلاه:

  • تلقاءي: يتم استخدامه لتعيين العناصر وفقًا للمتصفح.
  • أعلى: يتم استخدامه لضبط الهامش من الأعلى.
  • حقا: يتم استخدامه لضبط الهامش من اليمين.
  • زر: يتم استخدامه لضبط الهامش من الأسفل.
  • اليسار: يتم استخدامه لضبط الهامش من اليسار.

ملحوظة: تحديد قيمتين سيشير إلى الهامش من الأعلى والأسفل والهامش من اليسار واليمين ؛ ومع ذلك ، إذا تمت إضافة قيمة واحدة ، فسيتم تطبيق الهامش على الجوانب الأربعة.

دعنا ننتقل إلى المثال ، حيث سنركز رابطًا باستخدام ' حافة ' منشأه.

مثال

قم أولاً بتعيين قيمة خاصية العرض على أنها ' الكتلة 'والعرض كـ' 70 بكسل '. بعد ذلك ، قم بتطبيق خاصية الهامش وتعيين قيمتها على ' تلقاءي ':

أ {

عرض : الكتلة ؛

العرض : 70 بكسل ؛

حافة : تلقاءي ؛

}

ملحوظة: ال ' عرض ' و ' العرض 'من الضروري تعيين الممتلكات ؛ وإلا فإن ' حافة 'الممتلكات لن تعمل. يمكن تعيين قيمة خاصية العرض وفقًا لدقة شاشة العرض وطول النص.

يمكنك أن ترى من الصورة المحددة أن الرابط تم توسيطه بنجاح:

هذا هو! شرحنا طرق توسيط الارتباط.

استنتاج

ال ' محاذاة النص ' و ' حافة 'لتوسيط الرابط مع مساهمة' عرض ' و ' العرض ' منشأه. تعد خاصية العرض ضرورية مع خاصية محاذاة النص ، أثناء استخدام خاصية الهامش ، فإن كل من خصائص العرض والعرض إلزامية لتوسيط الرابط. ناقش هذا الدليل طرقًا مختلفة لتوسيط ارتباط في CSS.