ສູນຮູບພາບຕ່າງໆ, ຂໍ້ຄວາມແລະອົງປະກອບຕັນໃນເວລາທີ່ການກໍ່ສ້າງເວັບໄຊທ໌
ຖ້າທ່ານກໍາລັງ ຮຽນຮູ້ວິທີການສ້າງເວັບໄຊທ໌ທ໌ , ທັກສະທີ່ເປັນປະໂຫຍດທີ່ສຸດທີ່ທ່ານຕ້ອງການແມ່ນຈະເຮັດແນວໃດເພື່ອເຮັດໃຫ້ຈຸດສູນກາງຢູ່ໃນປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ. ນີ້ອາດຈະຫມາຍຄວາມວ່າຈຸດສູນກາງຂອງຮູບພາບຢູ່ໃນຫນ້າ, ຫຼືມັນອາດຈະເປັນຂໍ້ຄວາມທີ່ຖືກຕ້ອງຕາມກົດຫມາຍເຊັ່ນຫົວຂໍ້ເປັນສ່ວນຫນຶ່ງຂອງການອອກແບບ.
ວິທີທີ່ເຫມາະສົມທີ່ຈະເຮັດສໍາເລັດຮູບພາບຂອງຮູບພາບທີ່ເປັນກາງຫຼືຂໍ້ຄວາມຫຼືແມ້ກະທັ້ງເວັບໄຊທ໌ທັງຫມົດຂອງທ່ານແມ່ນໃຊ້ Cascading Style Sheets (CSS) . ສ່ວນໃຫຍ່ຂອງຄຸນສົມບັດສໍາລັບຈຸດໃຈກາງແມ່ນຢູ່ໃນ CSS ນັບຕັ້ງແຕ່ສະບັບ 1.0, ແລະພວກເຂົາເຮັດວຽກທີ່ດີກັບ CSS3 ແລະ ຕົວທ່ອງເວັບເວັບໄຊຕ໌ ທີ່ທັນສະໄຫມ.
ເຊັ່ນດຽວກັນກັບຫຼາຍດ້ານຂອງການອອກແບບເວັບໄຊຕ໌, ມີວິທີການຕ່າງໆໃນການນໍາໃຊ້ CSS ກັບອົງປະກອບສູນໃນຫນ້າເວັບ. ໃຫ້ເບິ່ງວິທີທີ່ແຕກຕ່າງກັນບາງຢ່າງທີ່ຈະນໍາໃຊ້ CSS ເພື່ອບັນລຸພາບເບິ່ງນີ້.
ກ່ຽວກັບການນໍາໃຊ້ CSS ກັບອົງປະກອບຂອງສູນໃນ HTML
ຈຸດໃຈກາງທີ່ມີ CSS ສາມາດເປັນສິ່ງທ້າທາຍສໍາລັບນັກອອກແບບເວັບເລີ່ມຕົ້ນເພາະວ່າມີວິທີທີ່ແຕກຕ່າງກັນຫຼາຍເພື່ອເຮັດສໍາເລັດແບບນີ້. ໃນຂະນະທີ່ວິທີການຕ່າງໆອາດຈະເປັນນັກພັດທະນາເວັບທີ່ດີງາມຫຼືຕາມລະດູການທີ່ຮູ້ວ່າບໍ່ແມ່ນເທກນິກທັງຫມົດທີ່ເຮັດວຽກກ່ຽວກັບທຸກໆອົງປະກອບ, ມັນອາດເປັນສິ່ງທ້າທາຍທີ່ສຸດສໍາລັບຜູ້ຊ່ຽວຊານດ້ານເວັບໃຫມ່ເພາະວ່າວິທີການຕ່າງໆທີ່ແຕກຕ່າງກັນນັ້ນຫມາຍຄວາມວ່າພວກເຂົາຕ້ອງຮູ້ວ່າໃຊ້ເວລາໃດ. ສິ່ງທີ່ດີທີ່ສຸດທີ່ຕ້ອງເຮັດຄືການໄດ້ຮັບຄວາມເຂົ້າໃຈກ່ຽວກັບວິທີການໃດຫນຶ່ງ. ເມື່ອທ່ານເລີ່ມຕົ້ນໃຊ້ພວກມັນ, ທ່ານຈະຮຽນຮູ້ວິທີທີ່ເຮັດວຽກທີ່ດີທີ່ສຸດໃນຕົວຢ່າງ.
ຢູ່ໃນລະດັບສູງ, ທ່ານສາມາດໃຊ້ CSS ເພື່ອ:
- ສູນຂໍ້ຄວາມ
- ສູນກາງອົງປະກອບລະດັບຕັນ (ເຊັ່ນ: ການແບ່ງ)
- ສູນຮູບພາບ
- ສູນກາງແນວຕັ້ງຫຼືຮູບພາບ
ຫລາຍປີ (ຫລາຍປີ), ຜູ້ອອກແບບເວັບສາມາດນໍາໃຊ້ອົງປະກອບ
ຂໍ້ຄວາມສູນກາງດ້ວຍ CSS
ສິ່ງທີ່ງ່າຍທີ່ສຸດໃນການໃສ່ໃຈໃສ່ຫນ້າເວັບແມ່ນຂໍ້ຄວາມ. ມີຄຸນສົມບັດແບບຫນຶ່ງເທົ່ານັ້ນທີ່ທ່ານຈໍາເປັນຕ້ອງຮູ້ເພື່ອເຮັດແນວນີ້: text align. ເອົາແບບ CSS ຂ້າງລຸ່ມນີ້, ຍົກຕົວຢ່າງ:
pcenter {text-align: center }
ດ້ວຍເສັ້ນນີ້ຂອງ CSS, ທຸກໆວັກທີ່ຂຽນດ້ວຍຊັ້ນກາງຈະຖືກຕັ້ງໃຈໃນແນວທາງໃນສ່ວນຂອງມັນ. ຕົວຢ່າງເຊັ່ນຖ້າວັກຢູ່ພາຍໃນພະແນກ, ຊຶ່ງຫມາຍຄວາມວ່າມັນເປັນລູກຂອງພະແນກນັ້ນ, ມັນຈະຖືກຕັ້ງຢູ່ຕາມທາງຂວາງພາຍໃນ
ນີ້ແມ່ນຕົວຢ່າງຂອງຊັ້ນຮຽນນີ້ທີ່ນໍາໃຊ້ໃນເອກະສານ HTML:
ຂໍ້ຄວາມນີ້ຖືກໃຈກາງ.
ໃນເວລາທີ່ຈຸດສູນກາງຂໍ້ຄວາມທີ່ມີຄຸນສົມບັດສອດຄ່ອງ text, ໃຫ້ຈື່ວ່າມັນຈະຖືກສູນກາງຢູ່ພາຍໃນອົງປະກອບຂອງມັນແລະບໍ່ຈໍາເປັນຕ້ອງຢູ່ໃນຫນ້າເຕັມຂອງມັນເອງ. ຍັງຈື່ໄວ້ວ່າຂໍ້ຄວາມທີ່ຖືກຕ້ອງຕາມກົດຫມາຍສາມາດມີຄວາມຫຍຸ້ງຍາກໃນການອ່ານສໍາລັບເນື້ອຫາຂະຫນາດໃຫຍ່ຂອງເນື້ອຫາ, ສະນັ້ນໃຫ້ໃຊ້ແບບນີ້ເລື້ອຍໆ. ຫົວຂໍ້ແລະຂໍ້ຄວາມຂະຫນາດນ້ອຍ, ເຊັ່ນຂໍ້ຄວາມ teaser ສໍາລັບບົດຄວາມຫຼືເນື້ອຫາອື່ນໆ, ມັກຈະງ່າຍຕໍ່ການອ່ານແລະປັບໄຫມໃນເວລາທີ່ຈຸດໃຈກາງ, ແຕ່ຂໍ້ຄວາມຂະຫນາດໃຫຍ່, ເຊັ່ນບົດຄວາມເຕັມຕົວມັນເອງ, ຈະເປັນການທ້າທາຍທີ່ຈະໃຊ້ຖ້າເນື້ອຫາແມ່ນສູນກາງຢ່າງເຕັມທີ່ justified ຈືຂໍ້ມູນການ, readability ແມ່ນສະເຫມີໄປທີ່ສໍາຄັນ ໃນເວລາທີ່ມັນມາກັບຂໍ້ຄວາມເວັບໄຊທ໌!
ສູນກາງຂອງເນື້ອຫາທີ່ມີ CSS
ທ່ອນແມ່ນອົງປະກອບໃດໆໃນຫນ້າຂອງທ່ານທີ່ມີຄວາມກວ້າງທີ່ຖືກກໍານົດແລະຖືກສ້າງຂຶ້ນເປັນອົງປະກອບລະດັບຕັນ. ມັກ, ທ່ອນເຫຼົ່ານີ້ຖືກສ້າງຂື້ນໂດຍໃຊ້ HTML element
divcenter {
margin: 0 auto
width: 80em
}
ຕົວເລກ CSS ສໍາລັບຄຸນສົມບັດຂອບນັ້ນຈະກໍານົດຂອບຂອບດ້ານລຸ່ມແລະດ້ານລຸ່ມເປັນຄ່າ 0, ໃນເບື້ອງຊ້າຍແລະຂວາຈະໃຊ້ "ອັດຕະໂນມັດ". ນີ້ຈໍາເປັນຕ້ອງໃຊ້ພື້ນທີ່ໃດຫນຶ່ງທີ່ມີຢູ່ແລະແບ່ງປັນມັນຢ່າງດຽວກັນລະຫວ່າງສອງດ້ານຂອງ window viewport, ປະສິດທິຜົນໃນການກໍານົດອົງປະກອບໃນຫນ້າ.
ທີ່ນີ້ມັນຖືກນໍາໃຊ້ໃນ HTML:
ແຕ່ຂໍ້ຄວາມພາຍໃນມັນຖືກປະໄວ້ສອດຄ່ອງກັນ.
ຂະນະທີ່ບລັອກຂອງທ່ານມີຄວາມກວ້າງທີ່ຖືກກໍານົດ, ມັນຈະສູນກາງຕົວຂອງມັນເອງພາຍໃນອົງປະກອບທີ່ມີຢູ່. ຂໍ້ຄວາມທີ່ມີຢູ່ໃນບລັອກນັ້ນຈະບໍ່ຖືກສູນກາງໃນມັນ, ແຕ່ຈະຖືກປະໄວ້ທີ່ຖືກຕ້ອງ. ນີ້ແມ່ນເນື່ອງຈາກຂໍ້ຄວາມຖືກປ່ອຍໄວ້ໃນຄວາມຖືກຕ້ອງໃນເບົາເຊີເວັບ. ຖ້າທ່ານຕ້ອງການຂໍ້ຄວາມທີ່ຖືກໃຈກາງ, ທ່ານສາມາດນໍາໃຊ້ຄຸນສົມບັດທີ່ສອດຄ່ອງກັບຂໍ້ຄວາມທີ່ພວກເຮົາໄດ້ຖືກປົກຄຸມໄວ້ກ່ອນຫນ້ານີ້ໂດຍກົງກັບວິທີການນີ້ເພື່ອຈຸດໃຈກາງຂອງພະແນກ.
ຮູບພາບສູນກາງດ້ວຍ CSS
ໃນຂະນະທີ່ຕົວທ່ອງເວັບສ່ວນໃຫຍ່ຈະສະແດງຮູບພາບທີ່ມີຈຸດສູນກາງໂດຍໃຊ້ຄຸນສົມບັດ text-align ດຽວກັນ, ພວກເຮົາໄດ້ເບິ່ງແລ້ວສໍາລັບວັກ, ມັນບໍ່ແມ່ນຄວາມຄິດທີ່ດີທີ່ຈະອີງໃສ່ເຕັກນິກດັ່ງກ່າວຍ້ອນວ່າມັນບໍ່ໄດ້ແນະນໍາໂດຍ W3C . ເນື່ອງຈາກວ່າມັນບໍ່ໄດ້ແນະນໍາ, ມັນກໍ່ມີໂອກາດທີ່ສະບັບຕ່າງໆໃນອະນາຄົດຂອງຕົວທ່ອງເວັບສາມາດເລືອກທີ່ຈະບໍ່ສົນໃຈວິທີນີ້.
ແທນທີ່ຈະນໍາໃຊ້ຂໍ້ຄວາມທີ່ສອດຄ່ອງກັບຮູບພາບກາງ, ທ່ານຄວນບອກ explicitly ວ່າຕົວທ່ອງເວັບຂອງຮູບພາບແມ່ນອົງປະກອບລະດັບຕັນ. ໂດຍວິທີນີ້, ທ່ານສາມາດຄວບຄຸມມັນຕາມທີ່ທ່ານຕ້ອງການ. ນີ້ແມ່ນ CSS ເພື່ອເຮັດໃຫ້ເກີດບັນຫານີ້:
imgcenter {
display: block
margin-left: auto
margin-right: auto
}
ແລະນີ້ແມ່ນ HTML ທີ່ສໍາລັບຮູບພາບທີ່ພວກເຮົາຢາກຈະຖືກໃຈກາງ:
ນອກນັ້ນທ່ານຍັງສາມາດຈຸດສູນກາງໂດຍໃຊ້ CSS ໃນເສັ້ນ (ເບິ່ງຂ້າງລຸ່ມນີ້), ແຕ່ວິທີການນີ້ບໍ່ໄດ້ຖືກແນະນໍາເພາະມັນເພີ່ມຮູບແບບທີ່ມີຮູບພາບໃນ HTML markup ຂອງທ່ານ. ຈືຂໍ້ມູນການ, ພວກເຮົາຕ້ອງແຍກອອກແບບແລະໂຄງສ້າງ, ດັ່ງນັ້ນການເພີ່ມຄໍເຕົ້າໄຂ່ທີ່ CSS ກັບລະຫັດ HTML ຂອງທ່ານທີ່ແຕກແຍກກັນແລະ, ດັ່ງນັ້ນ, ມັນຄວນຈະຫຼີກລ້ຽງເມື່ອໃດກໍ່ຕາມ.
ອົງປະກອບສູນກາງໂດຍກົງກັບ CSS
ຈຸດປະສົງຂອງຈຸດສູນກາງແມ່ນມີຄວາມທ້າທາຍໃນການອອກແບບເວັບໄຊຕ໌ແຕ່ມີການປ່ອຍ CSS Module Layout Flexible Box ໃນ CSS3, ໃນປັດຈຸບັນມີວິທີການເຮັດມັນ.
ການປັບລະດັບແນວຕັ້ງແບບດຽວກັນເຮັດວຽກຮ່ວມກັນກັບການວາງແນວນອນທີ່ນອນຢູ່ຂ້າງເທິງ. ຄຸນສົມບັດ CSS ແມ່ນຕັ້ງຢູ່ຕາມເສັ້ນຄ່າກາງ.
vcenter {
ແນວຕັ້ງ - ກາງ: ກາງ;
}
downside ກັບວິທີການນີ້ແມ່ນວ່າບໍ່ແມ່ນຕົວທ່ອງເວັບທັງຫມົດສະຫນັບສະຫນູນ CSS FlexBox, ເຖິງແມ່ນວ່າຫຼາຍກວ່າແລະຫຼາຍແມ່ນໄດ້ມາປະມານວິທີການຮູບແບບໃຫມ່ CSS ນີ້! ໃນຄວາມເປັນຈິງ, ທຸກຕົວທ່ອງເວັບທີ່ທັນສະໄຫມໃນປັດຈຸບັນສະຫນັບສະຫນູນຮູບແບບ CSS ນີ້. ນີ້ຫມາຍຄວາມວ່າຄວາມກັງວົນຂອງທ່ານເທົ່ານັ້ນທີ່ມີ Flexbox ຈະມີເວີຊັນຂອງ Browser ຫຼາຍຂຶ້ນ.
ຖ້າທ່ານມີບັນຫາກັບບັນດາຕົວທ່ອງເວັບທີ່ມີອາຍຸ, W3C ແນະນໍາໃຫ້ທ່ານສາມາດແນບຂໍ້ຄວາມໃນແຖວໂດຍໃຊ້ວິທີການດັ່ງຕໍ່ໄປນີ້:
- ວາງອົງປະກອບທີ່ຈະຖືກສູນກາງພາຍໃນອົງປະກອບທີ່ມີຢູ່, ເຊັ່ນ: div.
- ກໍານົດລະດັບຕໍາ່ສຸດໃນອົງປະກອບທີ່ມີ.
- ປະກາດວ່າມີອົງປະກອບເປັນຕາຕະລາງຕາຕະລາງ.
- ຕັ້ງການປັບແຖວຕັ້ງຊື່ "ກາງ".
ຕົວຢ່າງເຊັ່ນນີ້ແມ່ນ CSS:
vcenter {
min-height: 12em
ສະແດງ: table-cell;
ແນວຕັ້ງ - ກາງ: ກາງ;
}
ແລະນີ້ແມ່ນ HTML:
ຂໍ້ຄວາມນີ້ຖືກຕັ້ງຢູ່ໃນກ່ອງຢູ່ໃນກ່ອງ.
ສູນກາງແນວຕັ້ງແລະຮຸ່ນເກົ່າຂອງ Internet Explorer
ມີບາງວິທີທີ່ຈະບັງຄັບ Internet Explorer (IE) ໃຫ້ສູນກາງແລະຫຼັງຈາກນັ້ນໃຊ້ຄໍາເຫັນທີ່ມີເງື່ອນໄຂດັ່ງນັ້ນ IE ພຽງແຕ່ເຫັນຮູບແບບ, ແຕ່ວ່າມັນເປັນຄໍາເວົ້າທີ່ຂ້ອນຂ້າງແລະຫນ້າກຽດ. ຂ່າວດີແມ່ນວ່າກັບການຕັດສິນໃຈຂອງ Microsoft ໃນໄລຍະຜ່ານມາທີ່ຈະສະຫນັບສະຫນູນການສະຫນັບສະຫນູນ IE ຮຸ່ນເກົ່າ, ຕົວທ່ອງເວັບທີ່ບໍ່ສະຫນັບສະຫນູນຄວນຈະອອກໄປໃນໄວໆນີ້ເຊິ່ງເຮັດໃຫ້ຜູ້ອອກແບບເວັບງ່າຍຕໍ່ການນໍາໃຊ້ຮູບແບບທີ່ທັນສະໄຫມເຊັ່ນ CSS FlexBox, ບໍ່ພຽງແຕ່ໃຈກາງ, ງ່າຍຂຶ້ນສໍາລັບຜູ້ອອກແບບເວັບທັງຫມົດ.