السلام عليكمـ
درس بسيط وصغير عن كيفية توسيط المحتوى
اذا أردت اجعل 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>