ເປັນຈຸດສູນກາງ: CSS, ຮູບແບບ

ໃນເວລາທີ່ຮູບແບບຂອງຫນ້າມັກຈະເປັນຄວາມຈໍາເປັນເພື່ອເຮັດໃຫ້ເປັນຈຸດສູນກາງ CSS, ວິທີການ: ສໍາລັບການຍົກຕົວຢ່າງ, ການສູນຫນ່ວຍບໍລິການຕົ້ນຕໍ. ມີວິທີແກ້ໄຂຫຼາຍບັນຫາດັ່ງກ່າວນີ້, ແຕ່ລະຊຶ່ງໃນ sooner ຫຼືຫຼັງຈາກນັ້ນຈະມີການນໍາໃຊ້ coder ໃດແມ່ນ.

ຈັດຂໍ້ຄວາມໄປຫາສູນ

ປົກກະຕິແລ້ວສໍາລັບຈຸດປະສົງການອອກແບບທີ່ທ່ານຕ້ອງການທີ່ຈະກໍານົດຂໍ້ຄວາມສູນກາງ, CSS ໃນກໍລະນີດັ່ງກ່າວນີ້, ເພື່ອຫຼຸດຜ່ອນການໃຊ້ເວລາຂອງການບັງຄັບໄດ້. ໃນເມື່ອກ່ອນນີ້ໄດ້ເຮັດການນໍາໃຊ້ HTML, ຄຸນລັກສະນະ, ແຕ່ວ່າໃນປັດຈຸບັນມາດຕະຖານທີ່ກໍານົດໄວ້ເພື່ອໃຫ້ສອດຄ້ອງຂໍ້ຄວາມທີ່ມີເອກະສານໃຫ້ໄດ້. ໃນທາງກົງກັນຂ້າມກັບຕັນທີ່ທ່ານຕ້ອງການທີ່ຈະມີການປ່ຽນແປງໄດ້ padding ພາຍນອກໃນການຈັດຕໍາແຫນ່ງ CSS ຂອງຂໍ້ຄວາມໃນກາງໄດ້ຖືກເຮັດໃຫ້ມີເສັ້ນດຽວ:

• ຂໍ້ຄວາມ align: center;

ຄຸນສົມບັດນີ້ແມ່ນສືບທອດແລະຜ່ານຈາກຜູ້ປົກຄອງໃຫ້ເດັກນ້ອຍທັງຫມົດ. ມັນມີຜົນກະທົບບໍ່ພຽງແຕ່ຂໍ້ຄວາມແຕ່ຍັງກັບອົງປະກອບອື່ນໆ. ສໍາລັບຈຸດປະສົງນີ້, ພວກເຂົາເຈົ້າຄວນຈະໄດ້ຮັບການຕົວພິມເລັກ (ຕົວຢ່າງ:, span) ຫລືແຖວຕັນ (ຕັນທີ່ລະບຸຄຸນສົມບັດການສະແດງຜົນ: block). ທາງເລືອກສຸດທ້າຍຍັງອະນຸຍາດໃຫ້ທ່ານມີການປ່ຽນແປງຄວາມກວ້າງແລະຄວາມສູງຂອງອົງປະກອບການ, ເພີ່ມເຕີມການຕັ້ງຄ່າປ່ຽນແປງໄດ້ຂອງ indentation ໄດ້.

ຫນ້າມັກ align ເຫດຜົນວ່າເພື່ອຕົນເອງໂຄດຄໍາສັ່ງໄດ້. ນີ້ທັນທີເຮັດໃຫ້ລະຫັດທີ່ບໍ່ຖືກຕ້ອງ, ເນື່ອງຈາກ W3C ຍອມຮັບເຫດຜົນ align ລ້າສະໄຫມ. ການນໍາໃຊ້ມັນຢູ່ໃນຫນ້າເປັນບໍ່ໄດ້ແນະນໍາໃຫ້.

block ເປັນສູນກາງ

ຖ້າຫາກວ່າທ່ານຕ້ອງການທີ່ຈະກໍານົດຄວາມສອດຄ່ອງຂອງ div ຢູ່ເຄິ່ງກາງຂອງການ, CSS ສາມາດສະຫນອງວິທີການສະດວກສະບາຍ: ການນໍາໃຊ້ອັດຕາ padding ພາຍນອກໄດ້. Padding ສາມາດໄດ້ຮັບການກໍານົດໄວ້ເປັນອົງປະກອບຕັນໄດ້, ແລະເສັ້ນຕັນ. ຄ່າ Svoysva ຄວນຈະເປັນ 0 (padding ຕັ້ງ), ແລະອັດຕະໂນມັດ (ອັດຕະໂນມັດ indentation ຢຽດຕາມທາງຂວາງ):

• margin: 0 auto;

ໃນປັດຈຸບັນທາງເລືອກນີ້ແມ່ນໄດ້ຖືກຮັບຮູ້ເປັນທີ່ຖືກຕ້ອງຢ່າງແທ້ຈິງ. ການນໍາໃຊ້ padding ພາຍນອກຍັງອະນຸຍາດໃຫ້ທ່ານເພື່ອກໍານົດຄວາມສອດຄ່ອງຂອງສູນກາງໄດ້: ຄຸນສົມບັດ CSS, ຂອບໃບອະນຸຍາດໃຫ້ພວກເຮົາເພື່ອແກ້ໄຂບັນຫາຈໍານວນຫຼາຍທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບຕໍາແຫນ່ງໃນຫນ້າເວັບ.

ຄວາມສອດຄ່ອງຂອງແຂບຊ້າຍຫຼືຂວາຂອງທ່ອນໄມ້

ບາງຄັ້ງ CSS, ວິທີການບໍ່ຮຽກຮ້ອງໃຫ້ມີຄວາມສອດຄ່ອງຂອງສູນກາງ, ແຕ່ມັນເປັນຄວາມຈໍາເປັນເພື່ອເຮັດໃຫ້ສອງຕັນຕໍ່ໄປ, ຫນຶ່ງຈາກຂ້າງຊ້າຍແລະປະເທດອື່ນໆ - ຈາກສິດທິໃນການ. ສໍາລັບນີ້ໄດ້ເປັນຄຸນສົມບັດທີ່ເລື່ອນໄດ້, ຊຶ່ງສາມາດໃຊ້ເວລາຫນຶ່ງໃນສາມຄ່າ: ຊ້າຍ, ຂວາຫລືບໍ່. ໃຫ້ເວົ້າວ່າທ່ານມີສອງທ່ອນໄມ້ທີ່ຄວນໄດ້ຖືກບັນຈຸຂ້າງໂດຍຂ້າງ. ຫຼັງຈາກນັ້ນ, ລະຫັດແມ່ນເປັນດັ່ງຕໍ່ໄປນີ້:

• .left {float: left;}
• .right {float: right}

ຖ້າຫາກວ່າມີການ block ທີສາມ, ເຊິ່ງຕ້ອງໄດ້ຮັບການຕັ້ງຢູ່ພາຍໃຕ້ສອງຕັນຄັ້ງທໍາອິດ (ເຊັ່ນ: ທ້າຍ), ຫຼັງຈາກນັ້ນມັນເປັນສິ່ງຈໍາເປັນທີ່ຈະລົງທະບຽນຄຸນນະສົມບັດທີ່ຈະແຈ້ງ:

• .left {float: left;}
• .right {float: right}
• footer {ຈະແຈ້ງ: ທັງ}

ຄວາມຈິງທີ່ວ່າຕັນດ້ວຍຫ້ອງຮຽນຂອງຫຼຸດລົງຊ້າຍແລະຂວາອອກຈາກການໄຫຼຂອງຈໍານວນທັງຫມົດ, ວ່າແມ່ນ, ອົງປະກອບອື່ນໆທັງຫມົດເລີຍທີ່ມີຢູ່ຫຼາຍຂອງອົງປະກອບສອດຄ່ອງ. ຄຸນສົມບັດທີ່ຈະແຈ້ງ: ທັງອະນຸຍາດໃຫ້ block footer ຫຼືເບິ່ງເຫັນອື່ນໆຕົກຕະກອນຈາກຈຸລັງການໄຫຼແລະຫ້າມຫໍ່ (float) ກ່ຽວກັບການທັງຊ້າຍແລະຂວາ. ດັ່ງນັ້ນ, ໃນຕົວຢ່າງຂອງພວກເຮົາ, footer ໄດ້ຖືກຍົກຍ້າຍຈັດສັນລົງ.

ການຈັດຕໍາແຫນ່ງໃນແນວຕັ້ງ

ມີກໍລະນີທີ່ບໍ່ພຽງພໍທີ່ຈະກໍານົດຄວາມສອດຄ່ອງຂອງໃຈກາງຂອງ CSS, ວິທີການດັ່ງກ່າວແມ່ນ, ທ່ານຍັງຈະຕ້ອງມີການປ່ຽນແປງຕໍາແຫນ່ງຕັ້ງຂອງ block ເດັກ. ເສັ້ນຫຼືຕິດຕໍ່ກັນ, ຕັນອົງປະກອບສາມາດໄດ້ຮັບການກົດດັນຕໍ່ການແຂບຂ້າງເທິງຫຼືຕ່ໍາ, ຕັ້ງຢູ່ໃນພາກກາງຂອງອົງປະກອບຜູ້ປົກຄອງຫຼືຈະຢູ່ໃນສະຖານທີ່ທີ່ຕົນເອງມັກ. ສ່ວນໃຫຍ່ມັກຈະຮຽກຮ້ອງໃຫ້ມີຄວາມສອດຄ່ອງຂອງໃຈກາງຂອງຕັນໄດ້, ມັນໃຊ້ຄຸນລັກສະນະຕັ້ງ-align. ສົມມຸດວ່າມີສອງບລັອກຫນຶ່ງຊ້ອນຢູ່ພາຍໃນອື່ນໆ. ໃນຫນ່ວຍ indoor ນີ້ - ອົງປະກອບແຖວຕັນ (ສະແດງ: ເສັ້ນຕັນ). ມັນເປັນສິ່ງຈໍາເປັນທີ່ຈະຈັດການລູກ block ຕັ້ງ:

• ການຈັດຕໍາແຫນ່ງໃນຂອບເທິງ - .child {ຕັ້ງ-align: top};
• ເປັນຈຸດສູນກາງ - .child {ຕັ້ງ-align: middle};
• ການຈັດຕໍາແຫນ່ງຂອງແຂບທາງລຸ່ມ - .child {ຕັ້ງ-align: ທາງລຸ່ມ};

ໃນອົງປະກອບ block ສຽງຂໍ້ຄວາມ align ຫລືຕັ້ງ-align ບໍ່ມີຜົນ.

ບັນຫາທີ່ເປັນໄປໄດ້ທີ່ມີຫົວຫນ່ວຍກຸ່ມ

ບາງຄັ້ງ div align center ຂອງ CSS, ວິທີການທີ່ສາມາດເຮັດໃຫ້ເກີດບັນຫາໃນການພຽງເລັກນ້ອຍ. ສໍາລັບຕົວຢ່າງ, ໃນເວລາທີ່ການນໍາໃຊ້ທີ່ເລື່ອນໄດ້: ສໍາລັບຕົວຢ່າງ, ມີປະມານສາມ: ຫນ້າທໍາອິດ, .second ແລະອັນທີສາມ. ການຕັນທີ່ສອງແລະທີສາມຢູ່ໃນທໍາອິດ. ເປັນອົງປະກອບທີ່ມີລະດັບວິນາທີປະໄວ້, ສອດຄ່ອງ, ແລະຕັນທີ່ຜ່ານມາ - ກ່ຽວກັບສິດທິໃນການ. ຫຼັງຈາກທີ່ຈະສອດຄ່ອງກັບສອງຫຼຸດລົງຈາກກະແສຂໍ້ມູນ. ຖ້າຫາກວ່າອົງປະກອບພໍ່ແມ່ບໍ່ໄດ້ກໍານົດລະດັບຄວາມສູງ (ຕົວຢ່າງ:, 30em), ມັນຈະຢຸດການ stretch ສູງຂອງຫນ່ວຍງານບໍລິສັດໄດ້. ເພື່ອຫຼີກເວັ້ນການຜິດພາດນີ້, ການນໍາໃຊ້ "spacer" - ຫນ່ວຍງານພິເສດ, ເຊິ່ງຈະເຫັນ .second ແລະອັນທີສາມ. CSS ລະຫັດ:

• .second {float: left}
• ອັນທີສາມ {float: right}
• .clearfix {height: 0; ແຈ້ງ: ທັງ;}

pseudo ມັກໃຊ້: ພາຍຫຼັງທີ່ຍັງອະນຸຍາດໃຫ້ກັບຄືນຕັນເຂົ້າໄປໃນສະຖານທີ່ໂດຍການສ້າງ psevdorasporki (ໃນຕົວຢ່າງໃນ div ທີ່ມີລະດັບທີ່ຈະເຣັດໄດ້ພາຍໃນພາຊະນະແລະປະກອບດ້ວຍການ .left ຫນ້າທໍາອິດແລະ .right):

• .left {float: left}
• .right {float: right}
• .container: ຫຼັງຈາກ {ເນື້ອໃນ: ''; ການສະແດງ: ຕາຕະລາງ; ແຈ້ງ: ທັງ;}

ຕົວເລືອກຂ້າງເທິງ - ການທົ່ວໄປທີ່ສຸດ, ເຖິງແມ່ນວ່າມີການປ່ຽນແປງຈໍານວນຫນຶ່ງ. ທ່ານສະເຫມີສາມາດຊອກຫາວິທີທີ່ງ່າຍທີ່ສຸດແລະສະດວກທີ່ສຸດທີ່ຈະສ້າງ psevdorasporki ໂດຍການທົດລອງ.

ບັນຫາອີກປະການຫນຶ່ງພົບເລື້ອຍໆຮູບແບບ - ຄວາມສອດຄ່ອງຂອງອົງປະກອບເສັ້ນຕັນ. ຫຼັງຈາກທີ່ພວກເຂົາແຕ່ລະພື້ນທີ່ແມ່ນເພີ່ມອັດຕະໂນມັດ. ຈັດການກັບມັນຈະຊ່ວຍໃຫ້ຄຸນສົມບັດລຽບແຄມໃບ, ຊຶ່ງຖືກກໍານົດໂດຍ indentation ລົບ. ມີວິທີການອື່ນໆ, ເຊິ່ງໄດ້ຖືກນໍາໃຊ້ຫນ້ອຍ, ສໍາລັບການຍົກຕົວຢ່າງ, ປັບແມ່ນ ຂະຫນາດຂອງຕົວອັກສອນ. ໃນກໍລະນີດັ່ງກ່າວນີ້, ຄຸນສົມບັດຂອງອົງປະກອບຜູ້ປົກຄອງໄດ້ລົງທະບຽນນາດໂຕອັກສອນຂະຫນາດ: 0. ຖ້າຫາກວ່າຢູ່ພາຍໃນກຸ່ມຂອງຂໍ້ຄວາມ, ຄຸນສົມບັດຂອງອົງປະກອບເສັ້ນຕັນໄດ້ກັບຄືນໄປຂະຫນາດຕົວອັກສອນທີ່ຕ້ອງການ. ສໍາລັບຕົວຢ່າງ, ຕົວອັກສອນ, ຂະຫນາດ: 1em. ວິທີການ, ບໍ່ແມ່ນການສະເຫມີໄປສະດວກ, ສະນັ້ນມັນຖືກນໍາໃຊ້ຫຼາຍທົ່ວໄປສະບັບພາສາອັດຕາກໍາໄຮຈາກພາຍນອກ.

ສອດຄ່ອງກັບຕັນອະນຸຍາດໃຫ້ທ່ານເພື່ອສ້າງຫນ້າທີ່ສວຍງາມແລະເປັນປະໂຫຍດ: ການຈັດການທົ່ວໄປແລະຮູບແບບ, ແລະສະຖານທີ່ຂອງສິນຄ້າໃນຮ້ານຄ້າໄດ້, ແລະຮູບພາບຢູ່ໃນເວັບໄຊຂອງຂະຫນາດນ້ອຍ.