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

Zeref · 21 يوليو 2016

<!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> موجود ولكنه لا يعمل, فما هو الحل؟

مدون محترف · 21 يوليو 2016

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

يمكنك استخدام 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 حيث أنّه من خلال تغيير الرقم هذا سوف يتحرك الفريم إلى اليمين واليسار.

Zeref · 21 يوليو 2016

بتاريخ 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 % ؟ أهناك طريقة أسهل أو مساعدة في اختيار المكان عن طريقها؟

مدون محترف · 21 يوليو 2016

الطريقة الأسهل والأفضل هي إضافته ضِمن وسم <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 إليه.

تم التعديل في 21 يوليو 2016 بواسطة مدون محترف

عبدالعزيز برغش · 21 يوليو 2016

يمكنك توسيط ال 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;

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

تم التعديل في 21 يوليو 2016 بواسطة zezo mohamed

حسام برهان · 21 يوليو 2016

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

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

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

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

السؤال

Zeref

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

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

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

Recommended Posts

مدون محترف

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

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

Zeref

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

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

مدون محترف

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

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

عبدالعزيز برغش

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

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

حسام برهان

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية