CSS හි බ්ලොක් මූලද්රව්ය පෙළගැස්වීම
margin ගුණය භාවිතා කරන්නේ
ඉඩ ප්රමාණයන් නියම කිරීම සඳහා පමණක් නොව,
බ්ලොක් මූලද්රව්ය මධ්යගත කිරීම සඳහාද ය.
මෙය සඳහා දකුණු සහ වම්
ඉඩ ප්රමාණය auto අගයට සකසන්න.
පහත උදාහරණයේ ඇතුළත ඇති බ්ලොකය මධ්යයට පැමිණේ:
<div class="parent">
<div class="child"></div>
</div>
.parent {
border: 1px solid red;
}
.child {
height: 100px;
width: 200px;
border: 1px solid green;
margin: 10px auto;
}
:
මතක තබා ගන්න, මෙම ක්රමය මගින් බ්ලොක් මූලද්රව්ය පමණක්, තිරස් අතට පමණක් සහ ඒවාට පළල නියම කර ඇත්නම් පමණක් මධ්යගත කළ හැකිය.
අපට විවිධ ඉහළ සහ පහළ ඉඩ ප්රමාණය
margin අවශ්ය නම්, මෙසේ ලිවිය හැකිය:
.child {
margin: 30px auto 10px auto;
}
අගයන් තුනක් භාවිතයෙන්ද ලිවිය හැකිය: පළමුවැන්න
ඉහළ ඉඩ ප්රමාණය නියම කරයි, තුන්වැන්න - පහළ ඉඩ ප්රමාණය, සහ
දෙවැන්න auto අගය දකුණු
සහ වම් ඉඩ ප්රමාණයන් සඳහා නියම කරයි:
.child {
margin: 30px auto 10px;
}
කොළ පැහැ බ්ලොක් ඒවායේ මාපිය මූලද්රව්යයේ මධ්යයට පිහිටන පරිදි පිටුව නැවත නිර්මාණය කරන්න:
