القائمة الرئيسية

الصفحات

HTML

كود التوسيط في HTML

محمد دوس
(0)

شرح كود التوسيط في HTML: طريقة بسيطة لتوسيط العناصر

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

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

1. توسيط النص باستخدام CSS

عندما نتحدث عن توسيط النص، قد يتبادر إلى أذهاننا مباشرة الطريقة القديمة باستخدام الوسم <center>. ولكن من الأفضل تجنب استخدام هذه الطريقة في HTML5، لأنها قد تكون غير متوافقة مع بعض المتصفحات الحديثة. بدلًا من ذلك، يمكننا استخدام CSS لتوسيط النصوص بطريقة مرنة.

مثال: توسيط النص باستخدام CSS

<!DOCTYPE html>

<html lang="ar">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>توسيط النص باستخدام CSS</title>

    <style>

        .center-text {

            text-align: center;

        }

    </style>

</head>

<body>

    <p class="center-text">هذا النص تم توسيطه باستخدام CSS بطريقة حديثة.</p>

</body>

</html>

في المثال السابق، استخدمنا خاصية text-align في CSS مع القيمة center لتوسيط النص داخل العنصر <p>.

2. توسيط الصور باستخدام CSS

إذا كنت ترغب في توسيط صورة داخل الصفحة، يمكنك استخدام خاصية margin مع CSS. لكن هناك طريقة أفضل باستخدام display: block والتي تجعل الصورة تتصرف مثل عنصر block، مما يسمح بتوسيطها بسهولة.

مثال: توسيط صورة باستخدام CSS

<!DOCTYPE html>

<html lang="ar">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>توسيط صورة باستخدام CSS</title>

    <style>

        .center-image {

            display: block;

            margin-left: auto;

            margin-right: auto;

        }

    </style>

</head>

<body>

    <img src="https://via.placeholder.com/150" class="center-image" alt="صورة">

</body>

</html>

في هذا المثال، يتم استخدام margin-left: auto و margin-right: auto لتوسيط الصورة داخل الصفحة.

3. توسيط باستخدام Flexbox

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

مثال: توسيط عنصر باستخدام Flexbox

<!DOCTYPE html>

<html lang="ar">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>توسيط باستخدام Flexbox</title>

    <style>

        .flex-container {

            display: flex;

            justify-content: center; /* توسيط أفقي */

            align-items: center; /* توسيط عمودي */

            height: 100vh; /* ملء الشاشة بالكامل */

        }

    </style>

</head>

<body>

    <div class="flex-container">

        <p>هذا النص تم توسيطه باستخدام Flexbox.</p>

    </div>

</body>

</html>

في هذا المثال، قمنا باستخدام display: flex لتوزيع العناصر في الحاوية، مع خاصيتي justify-content و align-items لتوسيط العنصر أفقيًا وعموديًا.

الخلاصة

كما رأينا، هناك عدة طرق لتوسيط النصوص والعناصر في HTML باستخدام CSS. إذا كنت ترغب في توسيط النصوص فقط، يمكنك استخدام خاصية text-align. أما إذا كنت بحاجة إلى توسيط صور أو عناصر أخرى، فيمكنك استخدام margin أو Flexbox لتوسيطها في الصفحة.

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

أخر المواضيع من قسم : HTML

تعليقات

إرسال تعليق

أترك بصمتك بتعليق على مدونة التربية و التعليم