المحتوى

• لتخطو
• الطريقة 1 من 2: استخدام CSS
• الطريقة 2 من 2: استخدام علامة "center" في HTML

تعلمك مقالة ويكي هاو هذه كيفية توسيط النص في موقع ويب بتنسيق HTML. نستخدم CSS (أوراق الأنماط المتتالية أو أوراق الأنماط) لهذا الغرض. اعتدنا على التوسيط في HTML باستخدام امتداد المركز>علامة ، ولكن هذا لم يعد يعمل في معظم المتصفحات.

لتخطو

الطريقة 1 من 2: استخدام CSS

1. افتح الملف النصي الذي تصف فيه أنماطك. الآن المركز>العلامة لم تعد مستخدمة ، أنشئ عنصرًا جديدًا في هذا الملف من شأنه أن يعمل على توسيط النص في مناطق معينة من مستند HTML الخاص بك. إذا لم يكن لديك ملف CSS منفصل ، فستكون الرموز أعلى مستند HTML بين علامتي "style>" و "/ style>".
   • مثل نمط>- و / النمط>العلامات ليست موجودة حتى الآن ، يمكنك وضعها مباشرة تحت الجسم>علامة بالطريقة التالية:

   ! DOCTYPE html> html> body> style> / style>

2. قم بإنشاء فصل يعمل على توسيط النص. ال div>تخبر العلامة مستند HTML الخاص بك عن القسم المحدد الذي تنتمي إليه هذه الفئة. اكتب ما يلي بين علامات "النمط" ، وتأكد من النقر مرتين ↵ أدخل بعد السطر الأول:

   div.a {}

3. أضف ال محاذاة النصمنشأه. يكتب محاذاة النص: مركز ؛ بين الأقواس في div.a-القطاع الثامن. يبدو "الرأس" الآن كما يلي:

   ! DOCTYPE html> html> body> style> div.a {text-align: center؛ } / النمط>

4. أضف الصحيح شعبةعلامة على النص الذي تريد توسيطه. يمكنك القيام بذلك من خلال div>علامة فوق هذا النص وإغلاقه بعلامة / div>علامة أسفل هذا النص. على سبيل المثال ، إذا كنت تريد توسيط عنوان والفقرة الموجودة أسفله ، فسيبدو الأمر كما يلي:

   div> h1> مرحبًا بك في موقع الويب الخاص بي / h1> p> هذا الموقع بشكل أساسي لتوفير معلومات حول الأشياء. / p> / div>

5. استخدم ال div.aعلامة لتوسيط العناصر الأخرى. عندما تريد توسيط عنصر آخر ، مثل المحتوى بين العلامات p> / p> و h2> / h2>)، أنت تكتب div> لهذا العنصر و / div> عقب ذلك مباشرة. نظرًا لأنك قمت بالفعل بتعريف "div.a" كرمز CSS للتوسيط ، فإن هذه العناصر يتم توسيطها الآن أيضًا.

   style> div.a {text-align: center؛ } / style> div> h2> نرحب بالتبرعات / h2> p> من فضلك / p> / div>

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

   ! DOCTYPE html> html> body> style> div.a {text-align: center؛ } / style> div> h1> مرحبًا بك في موقع الويب الخاص بي / h1> p> هذا الموقع مخصص بشكل أساسي لتوفير معلومات حول الأشياء. / p> / div> div> h2> نرحب بالتبرعات / h2> p> please / p> / div> / body> / html>

الطريقة 2 من 2: استخدام علامة "center" في HTML

1. افتح مستند HTML الخاص بك. توضح هذه الطريقة كيفية التخلص من العناصر القديمة المركز>بطاقة شعار. قد تستمر هذه الطريقة في العمل في عدد من المتصفحات ، ولكن من الأفضل عدم الاعتماد عليها كثيرًا.
2. ابحث عن النص الذي تريد توسيطه. قم بالتمرير لأسفل في المستند حتى تجد العنوان أو الفقرة أو النص الآخر الذي تريد توسيطه.
3. ضع علامة "المركز" على جانبي النص. يبدو الرمز مثل هذا مركز> نص / مركز>. هنا ، "النص" هو النص الذي سيتم توسيطه. إذا كانت هناك علامات أخرى في هذا النص ، مثل "p> / p>" قبل فقرة ، فضع علامات "المركز" خارج العلامات الموجودة.

   center> h1> مرحبًا بك في موقع الويب الخاص بي / h1> / center> center> اجعل نفسك مرتاحًا! / center>

4. تحقق من مستند HTML الخاص بك. يجب أن يبدو مثل هذا:

   ! DOCTYPE html> html> body> h1> center> مرحبًا بك في موقع الويب الخاص بي / المركز> / h1> center> اجعل الأمر سهلاً على نفسك! / Center> p1> هذا الموقع بشكل أساسي لتوفير معلومات حول الأشياء. / p1> / body > / html>