CSS Layout - အလျားလိုက်နှင့် ဒေါင်လိုက် ချိန်ညှိခြင်း။
ဒြပ်စင်များကို
အလျားလိုက်နှင့် ဒေါင်လိုက် အလယ်ဗဟို
ဒြပ်စင်များကို အလယ်တွင် ညှိပါ။
ဘလောက်ဒြပ်စင် ( <div> ကဲ့သို့) အလျားလိုက်ဗဟိုပြုရန်၊ အသုံးပြုပါ။margin: auto;
ဒြပ်စင်၏ အကျယ်ကို သတ်မှတ်ခြင်းသည် ၎င်းကို ၎င်း၏ ကွန်တိန်နာ၏ အစွန်းများအထိ ဆန့်ထုတ်ခြင်းမှ တားဆီးမည်ဖြစ်သည်။
ထို့နောက် ဒြပ်စင်သည် သတ်မှတ်ထားသော အကျယ်ကို ယူမည်ဖြစ်ပြီး ကျန်နေရာအား အနားသတ်နှစ်ခုကြားတွင် အညီအမျှ ခွဲသွားမည်ဖြစ်သည်။
ဤ div အစိတ်အပိုင်းကို ဗဟိုပြုထားသည်။
ဥပမာ
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
မှတ်ချက်-width ပိုင်ဆိုင်မှုကို မသတ်မှတ်ထားပါက (သို့) 100% သို့ သတ်မှတ်ထား ပါက အလယ်တန်းညှိခြင်းသည် အကျိုးသက်ရောက်မှုမရှိပါ ။
စာသားကိုဗဟိုညှိပါ။
ဒြပ်စင်တစ်ခုအတွင်း စာသားကို ဗဟိုပြုရန်၊ အသုံးပြုပါ။text-align: center;
ဤစာသားကို ဗဟိုပြုထားသည်။
ဥပမာ
.center {
text-align: center;
border: 3px solid green;
}
အကြံပြုချက်- စာသားညှိနည်းအတွက် နောက်ထပ်ဥပမာများအတွက် CSS Text အခန်းကို ကြည့်ပါ။
ပုံတစ်ခုကို ဗဟိုပြုပါ။
ပုံတစ်ပုံကို ဗဟိုပြုရန် ဘယ်ညာ အနားသတ်မျဉ်းကို သတ်မှတ်ပြီး auto၎င်းကို blockဒြပ်စင်တစ်ခုအဖြစ် ပြုလုပ်ပါ။
ဥပမာ
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
ဘယ်နှင့်ညာ ချိန်ညှိခြင်း - အနေအထားကို အသုံးပြုခြင်း။
ဒြပ်စင်များကို ချိန်ညှိခြင်းအတွက် နည်းလမ်းတစ်ခုမှာ အသုံးပြုရန်ဖြစ်သည် position: absolute;။
ငယ်ငယ်ရွယ်ရွယ်နဲ့ ပိုအားနည်းတဲ့နှစ်တွေမှာ အဖေက ကျွန်မကို အကြံဉာဏ်တချို့ ပေးခဲ့ပြီး အဲဒီကတည်းက ကျွန်မစိတ်ထဲ ပြန်လှည့်လာခဲ့တယ်။
ဥပမာ
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
မှတ်ချက်- ပကတိနေရာချထားသော ဒြပ်စင်များကို ပုံမှန်စီးဆင်းမှုမှ ဖယ်ရှားပြီး ဒြပ်စင်များကို ထပ်နေနိုင်သည်။
ဘယ်နှင့်ညာ ညှိပါ - float ကိုအသုံးပြုခြင်း။
ဒြပ်စင်များကို ချိန်ညှိရန် အခြားနည်းလမ်းမှာ floatပိုင်ဆိုင်မှုကို အသုံးပြုရန်ဖြစ်သည်-
ဥပမာ
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
အဆိုပါရှင်းလင်းချက် Hack
မှတ်ချက်- ဒြပ်စင်တစ်ခုသည် ၎င်းတွင်ပါရှိသော ဒြပ်စင်ထက် ပိုမြင့်ပြီး ၎င်းသည် လွင့်နေပါက၊ ၎င်းသည် ၎င်း၏ကွန်တိန်နာ၏ အပြင်ဘက်သို့ ပြည့်လျှံသွားမည်ဖြစ်သည်။ ၎င်းကိုဖြေရှင်းရန် "clearfix hack" ကိုသင်အသုံးပြုနိုင်သည် (အောက်ပါဥပမာကိုကြည့်ပါ)။
Clearfix မပါဘဲ
Clearfix ဖြင့်
ထို့နောက် ဤပြဿနာကိုဖြေရှင်းရန် ပါဝင်သောဒြပ်စင်သို့ clearfix hack ကို ပေါင်းထည့်နိုင်သည်-
ဥပမာ
.clearfix::after {
content: "";
clear: both;
display: table;
}
ဒေါင်လိုက်အလယ်ဗဟို - padding ကိုအသုံးပြုခြင်း။
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:
I am vertically centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
}
To center both vertically and horizontally, use padding and text-align: center:
I am vertically and horizontally centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Center Vertically - Using line-height
Another trick is to use the line-height property with a value that is equal
to the height property:
I am vertically and horizontally centered.
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Center Vertically - Using position & transform
If padding and line-height
are not options, another solution is to use positioning and the transform property:
I am vertically and horizontally centered.
Example
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
Center Vertically - Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.