Abdo Mohamed YT نشر 15 أبريل أرسل تقرير مشاركة نشر 15 أبريل السلام عليكم عندي مشكله دلوقتي عايز اخلي الصوره في النص مش نازله تحت كده اعمل اي دا كود الزر <div class="acc-tool1"> <div class="acc-item"> <div onclick="window.open('https://youtube.com/@khatar_official');"> <div class="acc-title"> <i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i> اشترك في قناتي علي اليوتيوب <div class="author-img2 radius100px"><img border="0" data-original-height="1949" data-original-width="3464" height="180" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" width="320" /></div> </div></div></div></div> 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 ياسر مسكين نشر 15 أبريل أرسل تقرير مشاركة نشر 15 أبريل يمكنك إضافة الأمر "vertical-align: middle;" إلى الصورة لتوسيطها داخل العنصر من خلال إضافة الخاصية مباشرة إلى الصورة في علامة الصورة بهذا الشكل: <img border="0" data-original-height="1949" data-original-width="3464" height="180" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" width="320" style="vertical-align: middle;" /> قم بتجربته وأخبرني بالنتيجة. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Abdo Mohamed YT نشر 15 أبريل الكاتب أرسل تقرير مشاركة نشر 15 أبريل (معدل) بتاريخ 10 دقائق مضت قال ياسر مسكين: يمكنك إضافة الأمر "vertical-align: middle;" إلى الصورة لتوسيطها داخل العنصر من خلال إضافة الخاصية مباشرة إلى الصورة في علامة الصورة بهذا الشكل: <img border="0" data-original-height="1949" data-original-width="3464" height="180" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" width="320" style="vertical-align: middle;" /> قم بتجربته وأخبرني بالنتيجة. للاسف لسه الصوره تحت بتاريخ 10 دقائق مضت قال ياسر مسكين: يمكنك إضافة الأمر "vertical-align: middle;" إلى الصورة لتوسيطها داخل العنصر من خلال إضافة الخاصية مباشرة إلى الصورة في علامة الصورة بهذا الشكل: <img border="0" data-original-height="1949" data-original-width="3464" height="180" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" width="320" style="vertical-align: middle;" /> قم بتجربته وأخبرني بالنتيجة. دا كود الصوره بس في المظهر .author-img2{float: left;width:30px;height:30px;overflow:hidden} تم التعديل في 15 أبريل بواسطة Abdo Mohamed YT اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 ياسر مسكين نشر 15 أبريل أرسل تقرير مشاركة نشر 15 أبريل بتاريخ 7 دقائق مضت قال Abdo Mohamed YT: للاسف لسه الصوره تحت من فضلك قم بإرفاق ملف ال css الذي استخدمته في هذه الشيفرة، لأساعدك بشكل أفضل. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hikmat Jaafer نشر 15 أبريل أرسل تقرير مشاركة نشر 15 أبريل وعليكم السلام , يجب عليك وضع كلاس acc-title كالتالي : .acc-title { display: flex; align-items: center; justify-content: center; } ليتم وضع جميع العناصر بداخله على سوية واحدة , مثلاً ممكن أن يكون الكود كاملاً كالتالي ( يمكنك إرفاق كامل الكود مع styles الخاصة به للتوضيح أكثر ) : <!DOCTYPE html> <html> <head> <title></title> <style> .acc-tool1 { background-color: red; text-align: center; } .acc-title { display: flex; align-items: center; justify-content: center; } .author-img2 { margin-right: 10px; border-radius: 100px; } .acc-title i { margin-left: 10px; padding: 40px } </style> </head> <body> <div class="acc-tool1"> <div class="acc-item"> <div onclick="window.open('https://youtube.com/@khatar_official');"> <div class="acc-title"> <div class="author-img2 radius100px"><img height="40" width="40" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" /> </div> اشترك في قناتي علي اليوتيوب <i class="fab fa-download" style="color: white; font-size: 18px; font-weight: 400;"></i> </div> </div> </div> </div> </body> </html> 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Abdo Mohamed YT نشر 15 أبريل الكاتب أرسل تقرير مشاركة نشر 15 أبريل بتاريخ 1 دقيقة مضت قال ياسر مسكين: من فضلك قم بإرفاق ملف ال css الذي استخدمته في هذه الشيفرة، لأساعدك بشكل أفضل. خلاص شكرا يا بشمهندس ياسر تم حل المشكله اشكرك جدا علي مساعدت حضرتك بس هو ممكن ابعتلك الكود وانت تختصره لان الكود كبير جدا علي المطلوب 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 ياسر مسكين نشر 15 أبريل أرسل تقرير مشاركة نشر 15 أبريل بتاريخ الآن قال Abdo Mohamed YT: خلاص شكرا يا بشمهندس ياسر تم حل المشكله اشكرك جدا علي مساعدت حضرتك بس هو ممكن ابعتلك الكود وانت تختصره لان الكود كبير جدا علي المطلوب جيد جدا، أتمنى إرفاق الملف وسأرى ما يمكن فعله، يمكنك إرفاق مشروعك المصدري أيضا إن أردت. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Abdo Mohamed YT نشر 15 أبريل الكاتب أرسل تقرير مشاركة نشر 15 أبريل بتاريخ 1 دقيقة مضت قال ياسر مسكين: جيد جدا، أتمنى إرفاق الملف وسأرى ما يمكن فعله، يمكنك إرفاق مشروعك المصدري أيضا إن أردت. اريد عمل مثل هذا الموقع https://linktr.ee/khatar.official ولكن خاص بي وهذه الموقع هو تصميمي https://khatar-4.blogspot.com/2024/04/blog-post_15.html?khatar1 دا كود الازرار <div style="text-align: center;" > <div class="do1"></div> <div style="text-align: center;"> <div class="topic-author"> <div class="social-buttons"> <div class="author-img radius100px"><img border="0" data-original-height="1949" data-original-width="3464" height="180" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" width="320" /></div></div></div></div> <div class="do2"></div> <div style="text-align: center;"><span style="font-size: x-large;"><b>خطر - khatar</b></span></div> <div class="do3"></div> <div class="acc-tool1"> <div class="acc-item"> <div onclick="window.open('https://youtube.com/@khatar_official');"> <div class="acc-title"> <i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i> اشترك في قناتي علي اليوتيوب </div></div></div></div> <div class="acc-tool1"> <div class="acc-item"> <div onclick="window.open('https://youtube.com/@khatar_official');"> <div class="acc-title"> <i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i> اشترك في قناتي علي اليوتيوب </div></div></div></div> <div class="acc-tool1"> <div class="acc-item"> <div onclick="window.open('https://youtube.com/@khatar_official');"> <div class="acc-title"> <i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i> اشترك في قناتي علي اليوتيوب </div></div></div></div> <div class="acc-tool1"> <div class="acc-item"> <div onclick="window.open('https://youtube.com/@khatar_official');"> <div class="acc-title"> <i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i> اشترك في قناتي علي اليوتيوب </div></div></div></div> <div class="acc-tool1"> <div class="acc-item"> <div onclick="window.open('https://youtube.com/@khatar_official');"> <div class="acc-title"> <i class="fab fa-download" style=" color: white; font-size: 18px; font-weight: 400;"></i> اشترك في قناتي علي اليوتيوب <div class="author-img2 radius100px"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" /></div> </div></div></div></div> </div> ودا كود css .acc-tool1{display: flex;flex-direction: column;width: 100%;text-align: right;direction: rtl; margin-top:5px; margin-bottom:10px;border-radius: 20px;overflow: hidden;box-shadow: 0 1px 5px #000000;border: solid 2px #000000;background-color: #ff0000;} .acc-item{display: flex;flex-direction: column;width: 100%;border-bottom: solid 1px #000000;} .acc-tool2{display: flex;flex-direction: column;width: 100%;text-align: right;direction: rtl; margin-bottom:10px;border-radius: 20px;overflow: hidden;box-shadow: 0 1px 5px #000000;border: solid 2px #000000;background-color: #800180;} .acc-item{display: flex;flex-direction: column;width: 100%;border-bottom: solid 1px #000000;} .acc-tool3{display: flex;flex-direction: column;width: 100%;text-align: right;direction: rtl; margin-bottom:10px;border-radius: 20px;overflow: hidden;box-shadow: 0 1px 5px #000000;border: solid 2px #000000;background-color: #2E7D32;} .acc-item{display: flex;flex-direction: column;width: 100%;border-bottom: solid 1px #000000;} .acc-item:last-child{border: 0;} .acc-item .acc-title{display: block;justify-content: space-between;align-items: center;padding: 10px;font-weight: bolder;cursor: pointer;color: #fff;line-height: 30px;} .author-img2{float: left;width:30px;height:30px;overflow:hidden} بتاريخ 11 دقائق مضت قال Hikmat Jaafer: وعليكم السلام , يجب عليك وضع كلاس acc-title كالتالي : .acc-title { display: flex; align-items: center; justify-content: center; } ليتم وضع جميع العناصر بداخله على سوية واحدة , مثلاً ممكن أن يكون الكود كاملاً كالتالي ( يمكنك إرفاق كامل الكود مع styles الخاصة به للتوضيح أكثر ) : <!DOCTYPE html> <html> <head> <title></title> <style> .acc-tool1 { background-color: red; text-align: center; } .acc-title { display: flex; align-items: center; justify-content: center; } .author-img2 { margin-right: 10px; border-radius: 100px; } .acc-title i { margin-left: 10px; padding: 40px } </style> </head> <body> <div class="acc-tool1"> <div class="acc-item"> <div onclick="window.open('https://youtube.com/@khatar_official');"> <div class="acc-title"> <div class="author-img2 radius100px"><img height="40" width="40" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcnncOCeoSzijTrJkMRofEAfTbPHxMi4YRNkhAP8PUuNIvaoKioud-tHURilzjXIi6heOrfmVKMhJ71oqD5p3hPsKq9kwmuHsoyxS1B9dequ8talfFmNV62QMWbLHtpF2b45moj_hB1EOAf1RMqtx2zzXRWGbMeQC5EXsFAtRmi76Uv55cxGazBhhoKDaI=s1600" /> </div> اشترك في قناتي علي اليوتيوب <i class="fab fa-download" style="color: white; font-size: 18px; font-weight: 400;"></i> </div> </div> </div> </div> </body> </html> شكرا ليك يا بشمهندس ❤️❤️ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Abdo Mohamed YT
السلام عليكم
عندي مشكله دلوقتي عايز اخلي الصوره في النص مش نازله تحت كده اعمل اي
دا كود الزر
رابط هذا التعليق
شارك على الشبكات الإجتماعية
7 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.