كيفية محاذاة رابط إلى المركز في أتش تي أم أل-نصائح وحيل

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

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

الرابط الخاص بك

سيضع هذا الرمز الرابط في وسط الصفحة. ومع ذلك ، يتم إهمال العلامة ولا ينصح باستخدامها في هتمل 5. بدلا من ذلك ، يمكنك استخدام كس لنمط الروابط ومواءمتها.

طريقة أخرى لتوسيط الرابط هو استخدام أنماط كس. يمكنك تعيين أنماط لفئة الارتباط باستخدام كس وتطبيق هذه الفئة على الرابط الخاص بك. على سبيل المثال:

…

الرابط الخاص بك

سيؤدي هذا الرمز إلى إنشاء".تركز الارتباط "الفئة التي من شأنها محاذاة الارتباط إلى المركز باستخدام خاصية كس"محاذاة النص". قم بتطبيق هذه الفئة على الرابط الخاص بك باستخدام سمة "الفئة" للعلامة وسيتم توسيط الرابط الخاص بك.

1. طرق لتركيز الروابط في هتمل
2. محاذاة المركز باستخدام كس
3. استخدام جدول لمحاذاة رابط إلى المركز
4. استخدام سمة محاذاة النص لمحاذاة الارتباط في المركز
5. استخدام تحديد المواقع لمحاذاة الرابط إلى المركز
6. محاذاة مركز الارتباط باستخدام فليكسبوكس
7. توصيات ونصائح لتركيز الروابط في أتش تي أم أل
8. سؤال وجواب
9. كيف يمكنني مركز محاذاة الارتباط باستخدام أتش تي أم أل?
10. ما هي الطريقة الأخرى هناك لمحاذاة وصلة إلى مركز في أتش تي أم أل?
11. هل من الممكن توسيط الرابط أفقيا فقط, دون التأثير على المحاذاة الرأسية?

طرق لتركيز الروابط في هتمل

يمكن أن يكون توسيط رابط على صفحة ويب أمرا مهما لتحسين مظهره وضمان قابليته للاستخدام. هناك طرق مختلفة في هتمل لتوسيط الروابط:

1. الرابط
3. الرابط

استخدام القوائم - يمكنك أيضا استخدام القوائم لتوسيط الروابط. للقيام بذلك ، يمكنك تعيين نمط القائمة ومحاذاة عناصر القائمة في المركز باستخدام كس. على سبيل المثال:

الرابط

هذه ليست سوى بعض الطرق لتركيز الروابط في هتمل. يعتمد اختيار طريقة معينة على متطلبات وتفضيلات المطور ، بالإضافة إلى بنية رمز هتمل.

تتمثل إحدى طرق محاذاة العناصر في المركز في استخدام خاصية الهامش مع الاكتشاف التلقائي على اليسار واليمين. على سبيل المثال ، إذا كان لديك كتلة مع فئة "مركز كتلة" ، ثم استخدام التعليمات البرمجية كس التالية سوف محاذاة إلى المركز:

.مركز كتلة {

الهامش الأيسر: تلقائي;

الهامش الأيمن: تلقائي;

}

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

ص {

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

}

بالإضافة إلى ذلك ، يمكنك محاذاة النص إلى المركز مباشرة داخل العنصر باستخدام خاصية محاذاة النص مع القيمة "مركز". على سبيل المثال:

يتم توسيط النص

يمكنك أيضا استخدام خاصية العرض مع القيمة "فليكس" للعنصر الأصل لمحاذاة العناصر الفرعية في المركز. على سبيل المثال:

.حاوية {

عرض: فليكس;

تبرير-المحتوى: مركز;

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

}

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

استخدام جدول لمحاذاة رابط إلى المركز

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

نموذج التعليمات البرمجية:

نص الرابط

في مثال الكود أعلاه ، نستخدم

النمط=" الهامش: 0 تلقائي ؛ " السمة

للجدول لمحاذاة إلى وسط الصفحة.

وبالتالي ، سيكون الرابط موجودا في وسط الصفحة ، وذلك بفضل استخدام الجدول وسمة النمط المقابلة.

استخدام سمة محاذاة النص لمحاذاة الارتباط في المركز

السمة محاذاة النص هي واحدة من خصائص كس الرئيسية التي تسمح لك لمحاذاة النص والعناصر الأخرى داخل عناصر كتلة أفقيا. يمكنك استخدام هذه السمة لمحاذاة الارتباط في المركز.

أولا ، دعنا ننشئ رابطا باستخدام علامة ونعين فئة الارتباط المركزي:

الرابط

ثم أضف رمز كس التالي لهذه الفئة:

.مركز الارتباط {

عرض: كتلة;

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

}

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

احفظ التغييرات وقم بتحديث الصفحة في المتصفح ، وسترى أن الرابط يتم توسيطه الآن.

استخدام تحديد المواقع لمحاذاة الرابط إلى المركز

إذا كنت بحاجة إلى محاذاة رابط على صفحة ويب ، يمكنك استخدام تحديد المواقع كس.

يوجد أدناه نموذج رمز يساعدك على تحقيق النتيجة المرجوة:

الرابط الخاص بك

يحدد هذا الرمز فئة "الارتباط المركزي" للكتلة الخارجية. يوجد رابط داخل هذه الكتلة سيتم توسيطه.

باستخدام خاصية "الموضع: نسبي؛" ، نقوم بإنشاء موضع نسبي للكتلة الأم.

ثم ، باستخدام خاصية "محاذاة النص: المركز؛" ، قم بتعيين محاذاة النص إلى المركز داخل الكتلة الأصلية.

بالنسبة للرابط نفسه ، باستخدام خاصية" الموضع: مطلق ؛ " ، نقوم بإنشاء موضع مطلق. ثم ، باستخدام الخصائص" اليسار: 50 ٪ ؛ "و" تحويل: ترانسلاتكس(-50٪) ؛ " ، قم بمحاذاة الرابط أفقيا إلى مركز الكتلة الأم.

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

محاذاة مركز الارتباط باستخدام فليكسبوكس

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

أولا ، قم بإنشاء حاوية:

الحشو: 10 بكسل 20 بكسل;

لون الخلفية: # 999;

اللون: # فف;

زخرفة النص: لا شيء;

نصف قطر الحدود: 4 بكسل;

}

يتيح لك ذلك إضافة هوامش وتعيين مظهر الارتباط.

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

توصيات ونصائح لتركيز الروابط في أتش تي أم أل