تحسين تصميم وضع النص على الصور باستخدام HTML وCSS

htmlCopy code
<div id="container">
    <div id="header">
        <div class="left">
            <img src="images/banner-img1.jpg" alt="">
            <p class="text">jhcjdhdjshdjdhjdp>
        div>
        <div class="right">
            <img src="images/banner-img2.jpg" alt="">
            <p class="text">jgdhdgdhddhhsdp>
        div>
    div>
div>

ثم، سأقوم بتحسين الشيفرة الخاصة بالـ CSS لتحقيق التصميم الذي ترغب فيه:

cssCopy code
#container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 400px;
    width: 800px; /* تم تعديل العرض ليتناسب مع الصور */
    margin: 0 auto; /* للتأكد من وسط العناصر في الصفحة */
}

.left, .right {
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
}

.text {
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    bottom: 20px; /* تم تعديل الارتفاع ليظهر النص بشكل أفضل */
    left: 50%; /* لوضع النص في منتصف الصورة */
    transform: translateX(-50%); /* لتوسيط النص أفقيًا */
}

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