• 0

كيف أضع Frame في الوسط ؟ (HTML)

<!DOCTYPE html>
<html>
<head>
<title>Block and Inline elements</title>
<meta charset=UTF-8/>
<style>
iframe {
	align:center;
}
</style>
</head>
<body>
<div style="background-color:black;color:white;padding:20px;text-align:center;">
<h1>Neovka</h1>
<p>It's a site where you can earn lots of <span style="color:#4CAF50">Money</span> online by shortning links and share it with people</p>
</div>
<iframe src="" height="200" width="300" name="a"></iframe><br>
<a href = "http://www.w3schools.com" target="a">W3schools.com</a><br>
<a href = "http://devilsfruits.blogspot.com" target="a">Devil's Fruit Blogspot</a>
</body>
</html>

لدي هذا الكود, وكما ترون عملت Frame في الصفحة و وضعت مواقع يضغط عليها الزائر وثم تظهر في frame

ولكن المشكلة ان frame في جهة اليسار وانا اريد ان اضعه في الوسط, حاولت أن افعل ذلك عن طريق خاصية align و text-align وكما ترون aling:center; في تاق <style> موجود ولكنه لا يعمل, فما هو الحل؟

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


رابط هذه المساهمة
  • 1

أهلًا بك صديقي

يمكنك استخدام margin-left أيضًا align لوحدها سوف تُسبب مشاكل ولن يتم حفظ المشروع

وممكن نجعل الكود على هذا الشكل

<!DOCTYPE html>
<html>
<head>
<title>Block and Inline elements</title>
<meta charset=UTF-8/>
<style>
iframe {
text-align: center;
max-width: 100%;
position: relative;
overflow: hidden;
margin: 50px 36%;
}
</style>
</head>
<body>
<div style="background-color:black;color:white;padding:20px;text-align:center;">
<h1>Neovka</h1>
<p>It's a site where you can earn lots of <span style="color:#4CAF50">Money</span> online by shortning links and share it with people</p>
</div>
<iframe src="" height="200" width="300" name="a"></iframe><br>
<a href = "http://www.w3schools.com" target="a">W3schools.com</a><br>
<a href = "http://devilsfruits.blogspot.com" target="a">Devil's Fruit Blogspot</a>
</body>
</html>

وهكذا سوف يُصبح الـ frame في الوسط وبشكل مُناسب.

حيثُ أنّنا استخدمنا margin: 50px 36%، رقم 50px هو للتحكم بِبُعد الـ frame عن الهيدر في الأعلى حيثُ أنّه عند تغيير الرقم سوف يتحرك الفريم إلى أعلى وأسفل، رقم 36% للتحكم بمكان الـ frame حيث أنّه من خلال تغيير الرقم هذا سوف يتحرك الفريم إلى اليمين واليسار.

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


رابط هذه المساهمة
  • 0
بتاريخ 8 دقائق مضت قال مدون محترف:

أهلًا بك صديقي

تقدر تستخدم margin-left أيضًا align لوحدها سوف تُسبب مشاكل ولن يتم حفظ المشروع

وممكن نخلي الكود على هذا الشكل


<!DOCTYPE html>
<html>
<head>
<title>Block and Inline elements</title>
<meta charset=UTF-8/>
<style>
iframe {
text-align: center;
max-width: 100%;
position: relative;
overflow: hidden;
margin: 50px 36%;
}
</style>
</head>
<body>
<div style="background-color:black;color:white;padding:20px;text-align:center;">
<h1>Neovka</h1>
<p>It's a site where you can earn lots of <span style="color:#4CAF50">Money</span> online by shortning links and share it with people</p>
</div>
<iframe src="" height="200" width="300" name="a"></iframe><br>
<a href = "http://www.w3schools.com" target="a">W3schools.com</a><br>
<a href = "http://devilsfruits.blogspot.com" target="a">Devil's Fruit Blogspot</a>
</body>
</html>

وهكذا سوف يُصبح الـ frame في الوسط وبشكل مُناسب.

حيثُ أنّنا استخدمنا margin: 50px 36%، رقم 50px هو للتحكم بِبُعد الـ frame عن الهيدر في الأعلى حيثُ أنّه عند تغيير الرقم سوف يتحرك الفريم إلى أعلى وأسفل، رقم 36% للتحكم بمكان الـ frame حيث أنّه من خلال تغيير الرقم هذا سوف يتحرك الفريم إلى اليمين واليسار.

ولكن لماذاoverflowوmax-widthو positionموجودين؟ أي ماذا يعمل كل منهم فأنا لم آخذ عنهم درس أبدآ, أيضآ أليس من الصعب تحديد الوقع عن طريق margin % ؟ أهناك طريقة أسهل أو مساعدة في اختيار المكان عن طريقها؟

1 شخص أعجب بهذا

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


رابط هذه المساهمة
  • 0

الطريقة الأسهل والأفضل هي إضافته ضِمن وسم <div> </div>

حيثُ يُصبح كود الفريم على الشكل التالي:

<!DOCTYPE html>
<html>
<head>
<title>Block and Inline elements</title>
<meta charset=UTF-8/>
<style>
#frame {
    text-align: center;
}
</style>
</head>
<body>
<div style="background-color:black;color:white;padding:20px;text-align:center;">
<h1>Neovka</h1>
<p>It's a site where you can earn lots of <span style="color:#4CAF50">Money</span> online by shortning links and share it with people</p>
</div>
<div id='frame'>
<iframe src="" height="200" width="300" name="a"></iframe><br>
</div>
<a href = "http://www.w3schools.com" target="a">W3schools.com</a><br>
<a href = "http://devilsfruits.blogspot.com" target="a">Devil's Fruit Blogspot</a>
</body>
</html>

التغييرات التي حصلت

قُمنا بإضافة وسم

<div id='frame'> 
  ....
  ....
  ....
  </div>

وقُمنا بإضافته لكود CSS مع إضافة كود

text-align: center;

حيثُ أنّه أصبح بإمكانك تغيير center بـ (right, left)

وإذا أردت الفريم غير مُلتصق بالهيدر يُمكنك إضافة margin-top: 12px;  في كود css إليه.

تمّ تعديل بواسطة مدون محترف
1 شخص أعجب بهذا

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


رابط هذه المساهمة
  • 0

يمكنك توسيط ال iframe بإستخدام هذا الكود
 

<!DOCTYPE html>
<html>
<head>
<title>Block and Inline elements</title>
<meta charset=UTF-8/>
<style>
iframe {
display: block;
margin: 50px auto;
}
</style>
</head>
<body>
<div style="background-color:black;color:white;padding:20px;text-align:center;">
<h1>Neovka</h1>
<p>It's a site where you can earn lots of <span style="color:#4CAF50">Money</span> online by shortning links and share it with people</p>
</div>
<iframe src="" height="200" width="300" name="a"></iframe><br>
<a href = "http://www.w3schools.com" target="a">W3schools.com</a><br>
<a href = "http://devilsfruits.blogspot.com" target="a">Devil's Fruit Blogspot</a>
</body>
</html>

ستلاحظ
 

margin: 50px auto;

حيث أن 50px تحدد قيمة الهامش في أعلى العنصر وأسفله ويمكنك تغييرها بما يناسبك أما auto فهي تحدد الهامش على جانبي العنصر وهي تضعهما متساويين تلقائياً مما يضمن توسيط عنصر ال iframe أياً كان مقاس الشاشة المستخدم

ملاحظة : يجب وضع

display: block;

حتى يتم توسيط العنصر

تمّ تعديل بواسطة zezo mohamed

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


رابط هذه المساهمة
  • 0

استخدم تنسيقات CSS التالية:

iframe {
    margin: 0 auto;
    background-color: #777;
	display:block;
}

مع الانتباه إلى أهميّة القاعدتين display:block و margin: 0 auto. في حين أنّني وضعت لون الخلفية لتمييزه فقط.

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


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن