درس توسيط المحتوى CSS

**ليوناردو دافينشي** · 05-03-2009

السلام عليكمـ

درس بسيط وصغير عن كيفية توسيط المحتوى

اذا أردت اجعل div بمنتصف الصفحة بالدقة كيف ؟

توسيط أفقي اليكم المعادلة بالرياضيات

(عرض العنصر - 100) ÷ 2
أو
50 - (عرض العنصر ÷ 2)

مثال:-

كود PHP:



#exampleID {
    position: absolute;
    width: 70%;
    left: 15%;

}

عرض العنصر 70%
70 - 100 =30
30 ÷ 2 =15

اي أن left او right سوف تساوي 15%

كذالك نفس الشئ لتوسيط المحتوى عمودياً

(ارتفاع العنصر - 100) ÷ 2
أو
50 - (ارتفاع العنصر ÷ 2)

مثال للتوسيط عمودي و أفقي :

كود PHP:



#exampleID {
    position: absolute;
    width: 70%;
    height: 60%;    
    left: 15%;
    top: 20%;

            }

وبهذا الشكل يكون المحتوى بمنتصف الصفحة

كذالك نفس الطريقة لتوسيط div داخل div

لكن div الرئيسية يجب ان تكون

كود PHP:


position: relative

للتجربة:

كود PHP:


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
<!--
#Example     { 
    position: absolute;
    left: 38%;
    top: 40%;
    width: 24%;
    height: 20%; 
    border-style: solid; border-width: 2px 
    }
-->
</style>

</head>

<body>

<div id="Example">

</div>

</body>

</html>

**الأزهر** · 05-03-2009

بورك فيك عزيزي

**Fez-Soft** · 06-03-2009

مشكور اخي ليوناردو ..
^_*

**سحاب اون لاين** · 07-03-2009

هل جربت هذه الطريقة :

كود PHP:


#div {
margin: auto;
width: 500px;
}

كود PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>
 
<style type="text/css">
#example {
 border: 2px gray solid;
 width: 400px;
 height: 200px;
 margin: auto;
}
</style>
 
</head>
 
<body>
 
<div id="example">
</div>
 
</body>
 
</html>

**ليوناردو دافينشي** · 11-03-2009

المشاركة الأصلية كتبت بواسطة سحاب اون لاين مشاهدة المشاركة

هل جربت هذه الطريقة :

كود PHP:


#div {
margin: auto;
width: 500px;
}

كود PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>
 
<style type="text/css">
#example {
 border: 2px gray solid;
 width: 400px;
 height: 200px;
 margin: auto;
}
</style>
 
</head>
 
<body>
 
<div id="example">
</div>
 
</body>
 
</html>

غريب ردك :con2:

طريقتي غير مؤلوفة ,, ولو يا سحاب بتعرفني تبع الغرائب

يمكن مستغرب لانني نسيت ان اكتب بالعنوان التوسيط بواسطة position

؟

الأزهر و Fez-Soft >>> > مشكور شباب

**محمد1004** · 13-03-2009

بالمناسبة موضوع التوسيط بالسي اس اس موضوع هام جدا جدا و الكل يخطا فيه بالنسب للطريقة الاولى بالتوسيط هي خطا

جرب تحكم بعرض الصفحة تلاقي انه المربع ما ضل بنصف الصفحة لانو انت تتعامل مع نسبة من حواف الصفحة

لكن بالنسبة لرد سحاب اون لاين ممتاز جدا و هو الصح

شكرا لكم ..

**ليوناردو دافينشي** · 14-03-2009

المشاركة الأصلية كتبت بواسطة محمد1004 مشاهدة المشاركة

بالمناسبة موضوع التوسيط بالسي اس اس موضوع هام جدا جدا و الكل يخطا فيه بالنسب للطريقة الاولى بالتوسيط هي خطا

جرب تحكم بعرض الصفحة تلاقي انه المربع ما ضل بنصف الصفحة لانو انت تتعامل مع نسبة من حواف الصفحة

لكن بالنسبة لرد سحاب اون لاين ممتاز جدا و هو الصح

شكرا لكم ..

انا نفس رأيك بالزبط ..

باركـ الله فيك

الموضوع: درس توسيط المحتوى CSS

أدوات الموضوع

بحث في الموضوع

درس توسيط المحتوى CSS

المواضيع المتشابهه

كود توسيط المحتوى في CSS لا يعمل ! ..

ما هو برنامج ادارة المحتوى او طريقة ادارة المحتوى لموقع قناة mbc وموقع اخر !!؟؟

ضوابط المشاركة