كيفية عرض النص أسفل الصورة وليس بجانبها بواسطة CSS

مريم جمال2 · 4 يوليو 2023


.parent{

    width: 100%;

     display: grid;

     grid-template-columns: repeat(3 ,1fr);

     grid-template-rows: repeat(7 ,150px);

     gap: 10px;

     background: yellow;

     grid-template-areas: 
     
     "head head head"

     "content content content"

     "content content content"

     "content content content"

     "content content content"

     "content content content"

     "content content content"

     "content content content"

     "foot foot foot";



 

}

.parent div{

    background: violet;

}


.header{

    grid-area: head;

    background: blue;

    display: flex;

    padding-left: 15px;

    display: inline-flex;

    gap: 15px;

}

.main-content{

    grid-area: content;

    background: red;

    padding-left: 15px;

    display: flex;

    flex-wrap: wrap;

}

.footer{

    grid-area: foot;

    background: green;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Books saling </title>

    <link rel="stylesheet" href="Book store.css">

    <link rel="stylesheet" href="css/all.min.css">

</head>

<body>

    <div class="parent">

        <div class="header"> 
            
            <p><i class="fa-solid fa-phone"></i> call us</p>

            <p><i class="fa-solid fa-house"></i> home</p>  
            
            <p><i class="fa-solid fa-magnifying-glass"></i> search</p>
        
        </div>

        <div class="main-content">

           <p>hello</p> 

           <P><img src="download.jpeg" alt="العلوم"> العلوم</P>

           <P><img src="download (2).jpeg" alt="الدراسات">الدراسات</P>

           <P><img src="download (1).jpeg" alt="اللغه العربيه"> اللغه العربيه</P>

        </div>

        <div class="footer">

            <p>thank you</p> 

        </div>

    </div>
     
</body>

</html>

تم التعديل في 4 يوليو 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 4 يوليو 2023

ما المشكلة أو السؤال؟ أرجو توضيح المطلوب تنفيذه أو المشكلة التي تواجهيها.

مريم جمال2 · 4 يوليو 2023

لو سمحت

بتاريخ الآن قال مريم جمال2:


.parent{

    width: 100%;

     display: grid;

     grid-template-columns: repeat(3 ,1fr);

     grid-template-rows: repeat(7 ,150px);

     gap: 10px;

     background: yellow;

     grid-template-areas: 
     
     "head head head"

     "content content content"

     "content content content"

     "content content content"

     "content content content"

     "content content content"

     "content content content"

     "content content content"

     "foot foot foot";



 

}

.parent div{

    background: violet;

}


.header{

    grid-area: head;

    background: blue;

    display: flex;

    padding-left: 15px;

    display: inline-flex;

    gap: 15px;

}

.main-content{

    grid-area: content;

    background: red;

    padding-left: 15px;

    display: flex;

    flex-wrap: wrap;

}

.footer{

    grid-area: foot;

    background: green;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Books saling </title>

    <link rel="stylesheet" href="Book store.css">

    <link rel="stylesheet" href="css/all.min.css">

</head>

<body>

    <div class="parent">

        <div class="header"> 
            
            <p><i class="fa-solid fa-phone"></i> call us</p>

            <p><i class="fa-solid fa-house"></i> home</p>  
            
            <p><i class="fa-solid fa-magnifying-glass"></i> search</p>
        
        </div>

        <div class="main-content">

           <p>hello</p> 

           <P><img src="download.jpeg" alt="العلوم"> العلوم</P>

           <P><img src="download (2).jpeg" alt="الدراسات">الدراسات</P>

           <P><img src="download (1).jpeg" alt="اللغه العربيه"> اللغه العربيه</P>

        </div>

        <div class="footer">

            <p>thank you</p> 

        </div>

    </div>
     
</body>

</html>

لو سمحت كيف ممكن يبقى أسماء الكتب تحت الصور وليس بالجانب

بتاريخ الآن قال Mustafa Suleiman:

ما المشكلة أو السؤال؟ أرجو توضيح المطلوب تنفيذه أو المشكلة التي تواجهيها.

أسامة زيادة · 4 يوليو 2023

بتاريخ 7 دقائق مضت قال مريم جمال2:

لو سمحت

لو سمحت كيف ممكن يبقى أسماء الكتب تحت الصور وليس بالجانب

يمكنك إضافة النص في وسم span بهذا الشكل

<P><img src="01.png" alt="العلوم"> <span>العلوم</span></P>

وبعدها يمكنك إعطاء الوسم تنسيق التالي لجعل النص في صف

span {
  display: block;
}

وأيضاً يمكنك إضافة تنسيقات أخرى مثل تكبير حجم الخط أو تغير اللون أو جعله متوسط .

كما أن كل العناصر التي سوف تكون داخل الوسم p سوف تأتي على صف واحد

Mustafa Suleiman · 4 يوليو 2023

الأمر بسيط عليك بفصل النص عن الصورة بتضمين النص داخل عنصر مثل span ثم تنسيقه على أنه block من أجل أن يأتي على سطر منفصل وليس بجانب الصورة وقمت بتحسين أيضًا بتحسين الكود وإضافة أيقونات من خلال مكتبة font-awesome وإليك الكود النهائي بعد التعديل:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Books selling</title>
    <link rel="stylesheet" href="Book store.css">
    <link rel="stylesheet" href="css/all.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="parent">
        <div class="header"> 
            <p><i class="fa-solid fa-phone"></i> call us</p>
            <p><i class="fa-solid fa-house"></i> home</p>  
            <p><i class="fa-solid fa-magnifying-glass"></i> search</p>
        </div>
        <div class="main-content">
         
           <P><img src="https://placehold.co/200x200" alt="" class="img-box"><br><span>العلوم</span></P>
           <P><img src="https://placehold.co/200x200" alt="" class="img-box"><br><span>الدراسات</span></P>
           <P><img src="https://placehold.co/200x200" alt="" class="img-box"><br><span>اللغة العربية</span></P>
        </div>
        <div class="footer">
            <p>thank you</p> 
        </div>
    </div>
</body>
</html>

CSS

.parent {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, 150px);
    gap: 10px;
    background: yellow;
    grid-template-areas: 
        "head head head"
        "content content content"
        "content content content"
        "content content content"
        "content content content"
        "content content content"
        "content content content"
        "content content content"
        "foot foot foot";
}

.parent div {
    background: violet;
}

.header {
    grid-area: head;
    background: blue;
    display: flex;
    padding-left: 15px;
    gap: 15px;
}

.main-content {
    grid-area: content;
    background: red;
    padding-left: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.main-content p {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-content img {
    margin-bottom: 10px;
}

.footer {
    grid-area: foot;
    background: green;
}

عبدالباسط ابراهيم · 5 يوليو 2023

نعم، يمكن استخدام خاصية display: flex لتحقيق ذلك بسهولة كما في التعليق السابق وهي طريقة من الكثير من الطرق التي يمكنها تنفيذ المطلوب ولكن أسهل طريقة حالياً هي إعطاء الصور خاصية ال display block فقط وسيتم تنفيذ المطلوب

من خلال إضافة السطر التالي

.main-content img {
  display: block;
}

ويفضل أيضاً فصل ال الكلمات عن الصورة من خلال عنصر كما يلي

<P><img src="download.jpeg" alt="العلوم" > <span>العلوم</span> </P>

كيفية عرض النص أسفل الصورة وليس بجانبها بواسطة CSS

السؤال

مريم جمال2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

5 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

مريم جمال2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

أسامة زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عبدالباسط ابراهيم

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية