ဘာမှာ ဖြစ်သလဲ

အပိုင်းခွဲ အခွဲအား ထူးခြား ပြုလုပ်ရန် ဘာမှာ ဖြစ်သလဲ

ပထမပေါင်းစဉ် - အခြေခံ အချက်အလက် ထပ်ပေးပါ

<div class="divider">Lorem Ipsum</div>

ဒုတိယပေါင်းစဉ် - အခြေခံ အချက်အလက် ထပ်ပေးပါ

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

ကျွန်ုပ်သို့ ကြိုးစားပါ

အကျိုးသတ်မှတ်ချက်

ဒီ အကျိုးသတ်မှတ်ချက် တွင် အခြေခံ အချက်အလက် ကို သတ်မှတ်ပါ။ အခြေခံ အချက်အလက် သည် HTML နှင့် CSS အပေါင်းစပ် ကို သုံးစွဲပါ။

ပထမပေါင်းစဉ်၌ အခြေခံ အချက်အလက် ကို သတ်မှတ်ပါ၊ အချက်အလက် အတွင်း ကို သတ်မှတ်ပါ။ ဒီ အချက်အလက် အတွင်း အကြောင်းအရာ သည် "Lorem Ipsum" ဖြစ်သည်

နောက်ပိုင်း၌ အခြေခံ အအောင်းအတန်း ကို သတ်မှတ်ပါ။ .divider အကွင်း အအောင်းအတန်း ကို သတ်မှတ်ပါ။ ဒီ အကွင်း အအောင်းအတန်း တွင် အကွင်း အခွဲအား သတ်မှတ်ပါ၊ အကွင်း အခွဲအား အကျယ်ဝန်း ကို သတ်မှတ်ပါ align-items: center; အပိုင်းခွဲ အတွင်း အခွဲအား အရှိန်ဆုံး ပြုပါ။

နောက်ပိုင်း၌ ပုဂ္ဂိုလ်ပုံ ကို သုံးစွဲပါ။ ::before နှင့် ::after အပိုင်းခွဲ အတွင်း အခွဲအား ပေးပို့ပါ။ ဒီ ပုဂ္ဂိုလ်ပုံ အတွက် အခွဲအား အတွက် ပါဝင်သည် flex: 1 ကို ပေးပို့ပါ။ .divider အရာဝတ္တရ အတွင်း အခွဲအား သုံးစွဲသော အခွဲအား အစားထိုးပါ။ သို့သော် သင်သည် ပါဝင်သည် content: '' ဒီ ပုဂ္ဂိုလ်ပုံ အတွက် အကွက် အတွက် အကြောင်းအရာ ကို မပါဘဲ ဖြစ်စေ သတ်မှတ်ပါ။

နောက်ပိုင်း၌ ၊ အတွင်းဘက် အကျယ်ဝန်း နှင့် နံပါတ် အကျယ်ဝန်း ကို စတင် သတ်မှတ် ပြီး အပိုင်းခွဲ အအောင်းအတန်း ကို သတ်မှတ်ပါ။ ဒီ အကျိုးသတ်မှတ်ချက် တွင် အပိုင်းခွဲ အရောင် သည် အပိုင်းခွဲ အကျယ်ဝန်း နှင့် အကျယ်ဝန်း ကို ပါဝင်သည်။