عرض صورة بجانب نص بلغة css & html

Anas Lasheen · 4 نوفمبر 2021

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="description" content="The official website for web designer Anas Lasheen ">
            <meta name="author" content="Anas Lasheen">     
            <title>Anas Lasheen</title> 
            <link rel="stylesheet" href="/css/style.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
        </head>

              <body>
                <main>
                    <section id="header">
                        <div id="branding">
                            <h1 ><a href="index.html"> <a href="index.html"><img src="/img/letter-a (1).png" alt="page icon"></a>  </a></h1>
                        </div>
                        <nav>
                            <ul>
                                
                                <li class="current"><a href="index.html">Home</a></li>
                                <li><a href="gallery.html">Portfolio</a></li>
                                <li>Services</li>
                                <li><a target="_blank" href="https://www.linkedin.com/in/anas-lasheen-5104981a6/">Linkedin</a></li>
                                <li><a target="_blank" href="https://dribbble.com/RAGNAR_VI">Dribbble</a></li>
                                <li>Contact</li>
                                
                            </ul>
                            
                        </nav>


                    </section>
                    <section id="showcase">
                       
                        <h1>Hello there!</h1>
                        <p>   Fulled by a passion for designing compelling <br>
                            products,I have a deep desire to excel and <br>
                            continuously improve in my work.Learn more about <br>
                            my journey below.</p>
                        <img src="/img/1634485372473.jpg" alt="anasphoto" class="myimg">

                    </section>
                    <section id="newsletter">

                    </section>
                    <section id="boxes">

                    </section>
                    <section id="footer">

                    </section>






                </main>



    
              </body>
















</html>

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Space+Mono&display=swap');
body
{
    font-family: 'Space Mono', monospace;
    padding: 0;
    margin: 0;
    background-color:  #ffffff;
    direction: ltr;
}

main
{
    display: flex;
    flex-wrap: wrap;
}
main>section {
    width: 100%;
    margin: auto;
    overflow: hidden;

}
#header
{
    background: #ffffff;
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    align-content: center;
    align-items: center;    
    padding: 0px 40px;

}

#branding h1
{
    font-size: 20px;
    
}
#branding  h1 img
{
    width: 50px;
    height: 50px;
}
nav >ul
{
    margin-top: 0px;
    list-style-type:none;
}
#header a
{
    color: rgb(3, 2, 2);
    text-decoration: none;
}
nav > ul > li
{
    float:left;
    margin-left: 20px;
    margin-right: 10px; 
    position: relative;  
    left: 1150px;
    bottom: 10px; 
}
li  a
{
    text-decoration: none;
    color: whitesmoke;
}
#header .highlight, #header .current a
{
    color: rgb(3, 2, 2) ;
}
#showcase .myimg
{
     border-radius: 50%;
     position: absolute;
     top: 110px;
     left: 300px;

     
}   
#showcase h1
{
    font-size: 50px;
    padding-left: 700px;
    
   
}
#showcase p
{
    font-size: 25px;
    opacity: .6;
    padding-left: 700px;
    
}

لا استطيع وضع الصورة بجوار النصوص وقد قمت بتجريب جميع الطرق بلغة css ولكن نفس المشكلة

Wael Aljamal · 4 نوفمبر 2021

العناصر التي نريد منهم ان يتم وضعهم بنفس المستوى، اي نفس السطر، نجعل خاصية العرض لهم display تساوي inline-block لتسمح بتجاول العناصر سوية، لأن block لوحدها تضع كل عنصر لوحدة في سطر منفصل.

حاولي ذلك,

خاصية العرض display في css

أرجو منك تبديل الصور بالشيفرات البرمجية في وصف المشكلة

سمير عبود · 4 نوفمبر 2021

بإمكانك إستخدام خواص الصندوق المرن (Flex Box) للوصول إلى ما تريد و هذا مثال عن ما تريد بالضبط على codepen:

كما يُمكنك الإطلاع على بعض المقالات على الأكاديمية للتعرف على خواص الflex box منها:

Salah Eddin Beriani2 · 6 نوفمبر 2021

نحتاج لانشاء عنصر يحتوي الصورة والنص واستخدام flexbox للوصول للنتيجة المرغوبة عبر تعيين خصائص css للعنصر الحاوي

.parent {
   display: flex;
   align - items: center;
}

او يمنكنك استخدام خاصية المحاذاة الرأسية لمحاذاة العناصر رأسيًا بشكل مباشر

.parent {
   vertical - align: middle;
}

كما يمكنك أيضا استخدام inline-block كما هو مبين في الأسفل

.image {

   Display: inline-block;
}


.text {
   display: inline-block;
   margin - top: 5 px;
}

عرض صورة بجانب نص بلغة css & html

السؤال

Anas Lasheen

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

Recommended Posts

Wael Aljamal

سمير عبود

Salah Eddin Beriani2

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية