هناك طريقتان لتوسيط الرابط:
في هذه المقالة ، سنشرح كلا الطريقتين لتوسيط الرابط. دعنا نبدأ!
الطريقة الأولى: توسيط الروابط في CSS باستخدام خاصية محاذاة النص
لتوسيط الروابط في HTML ، سنستخدم ' محاذاة النص 'من CSS. ال ' محاذاة النص 'في CSS لضبط محاذاة النص مثل اليسار واليمين والوسط وتبرير المحاذاة.
بناء الجملة
بناء جملة خاصية محاذاة النص هو:
محاذاة النص : القيمة
في مكان ' القيمة '، يمكنك ضبط محاذاة النص مثل اليسار واليمين والوسط والضبط.
الآن ، سوف نستخدم ' محاذاة النص 'لتوسيط محاذاة الروابط المعينة.
مثال
لتوسيط رابط على صفحة ويب ، سنضيف ارتباطًا بتنسيق HTML داخل علامة
. للقيام بذلك ، استخدم علامة لتحديد ارتباط تشعبي وإعطاء عنوان الموقع المطلوب. بعد ذلك ، حدد اسم الارتباط. في حالتنا ، أضفنا الرابط إلى موقع Linuxhint الخاص بنا.لغة البرمجة
< هيئة >< أ href = 'https://linuxhint.com/' > لينكس < / أ >
< / هيئة >
تشير الصورة المعروضة أدناه إلى إضافة الارتباط الذي يتم وضعه على الجانب الأيسر افتراضيًا:
انتقل الآن إلى CSS لتوسيط الرابط.
هنا ، سوف نستخدم ' أ 'للوصول إلى الرابط المضاف. بعد ذلك ، قم بتعيين قيمة محاذاة النص على أنها ' المركز وعرض كـ ' الكتلة '. نتيجة لذلك ، ستتم إضافة العنصر كعنصر كتلة ، بدءًا من سطر جديد ويأخذ العرض بالكامل.
CSS
أ {محاذاة النص : المركز ؛
عرض : الكتلة ؛
}
ملحوظة: لا تعمل خاصية محاذاة نص CSS وحدها لتوسيط العلامة. لذلك ، يجب عليك استخدام ' عرض 'وتعيين قيمته' الكتلة 'لتوسيط الارتباط.
الآن ، انتقل إلى HTML وقم بتنفيذه لرؤية النتيجة التالية. هنا ، يمكنك أن ترى أن الارتباط محاذي في وسط صفحة الويب:
دعنا ننتقل إلى الطريقة الثانية لمحاذاة الرابط في المركز.
الطريقة 2: توسيط الروابط في CSS باستخدام خاصية 'الهامش'
في CSS ، ' حافة 'يتم استخدام الخاصية لتوسيط الرابط. إنها خاصية الاختزال لـ ' الهامش الأيسر '،' الهامش الأيمن '،' الهامش العلوي '، و ' الهامش السفلي ' الخصائص. يمكنك تعيين قيم جميع الخصائص المحددة في سطر واحد.
بناء الجملة
بناء جملة خاصية الهامش هو:
حافة : تلقاءي | أعلى حقا الأسفل اليسارفيما يلي وصف بناء الجملة المذكور أعلاه:
- تلقاءي: يتم استخدامه لتعيين العناصر وفقًا للمتصفح.
- أعلى: يتم استخدامه لضبط الهامش من الأعلى.
- حقا: يتم استخدامه لضبط الهامش من اليمين.
- زر: يتم استخدامه لضبط الهامش من الأسفل.
- اليسار: يتم استخدامه لضبط الهامش من اليسار.
ملحوظة: تحديد قيمتين سيشير إلى الهامش من الأعلى والأسفل والهامش من اليسار واليمين ؛ ومع ذلك ، إذا تمت إضافة قيمة واحدة ، فسيتم تطبيق الهامش على الجوانب الأربعة.
دعنا ننتقل إلى المثال ، حيث سنركز رابطًا باستخدام ' حافة ' منشأه.
مثال
قم أولاً بتعيين قيمة خاصية العرض على أنها ' الكتلة 'والعرض كـ' 70 بكسل '. بعد ذلك ، قم بتطبيق خاصية الهامش وتعيين قيمتها على ' تلقاءي ':
أ {عرض : الكتلة ؛
العرض : 70 بكسل ؛
حافة : تلقاءي ؛
}
ملحوظة: ال ' عرض ' و ' العرض 'من الضروري تعيين الممتلكات ؛ وإلا فإن ' حافة 'الممتلكات لن تعمل. يمكن تعيين قيمة خاصية العرض وفقًا لدقة شاشة العرض وطول النص.
يمكنك أن ترى من الصورة المحددة أن الرابط تم توسيطه بنجاح:
هذا هو! شرحنا طرق توسيط الارتباط.
استنتاج
ال ' محاذاة النص ' و ' حافة 'لتوسيط الرابط مع مساهمة' عرض ' و ' العرض ' منشأه. تعد خاصية العرض ضرورية مع خاصية محاذاة النص ، أثناء استخدام خاصية الهامش ، فإن كل من خصائص العرض والعرض إلزامية لتوسيط الرابط. ناقش هذا الدليل طرقًا مختلفة لتوسيط ارتباط في CSS.