ເນື້ອຫາ

• ຂັ້ນຕອນ
• ວິທີການ 1 ຈາກ 2: CSS (ແນະນໍາ)
• ວິທີທີ່ 2 ຂອງ 2: ຄຸນລັກສະນະ "ຈັດລຽງ" ໃນ HTML

ຄຸນລັກສະນະ ຈັດລຽນ ແທັກ html> ຖືກຄັດຄ້ານມາຕັ້ງແຕ່ HTML5. ໃນຂະນະທີ່ຄຸນລັກສະນະນີ້ຍັງເຮັດວຽກຢູ່ໃນຕົວທ່ອງເວັບຂອງເວັບໄຊທ most ສ່ວນໃຫຍ່, ແນະນໍາໃຫ້ເຈົ້າຈັດຕໍາ ແໜ່ງ ຮູບພາບໂດຍໃຊ້ Cascading Style Sheets (CSS). ໃນບົດຄວາມນີ້, ພວກເຮົາຈະສະແດງໃຫ້ເຈົ້າເຫັນວິທີການວາງຮູບພາບຢູ່ທາງກາງໂດຍໃຊ້ CSS ແລະແທັກທີ່ຖືກຄັດຄ້ານ. ຈັດລຽນ.

ຂັ້ນຕອນ

ວິທີການ 1 ຈາກ 2: CSS (ແນະນໍາ)

1. 1 ເພີ່ມລະຫັດ HTML ສໍາລັບຮູບພາບ. ເຈົ້າຈະໃຊ້ແຜ່ນສະໄຕລ cas ແບບ cascading ເພື່ອຈັດຮຽງຮູບພາບ, ແຕ່ເຈົ້າຈະຕ້ອງວາງມັນໃສ່ເທິງ ໜ້າ ໂດຍໃຊ້ HTML. ຕໍ່ໄປນີ້ແມ່ນຕົວຢ່າງຂອງການໃຊ້ແທັກ img> ເພື່ອໃສ່ຮູບໃສ່ໃນລະຫັດຂອງເຈົ້າ:

   img src = "dog.webp" alt = "ນີ້ແມ່ນຮູບຂອງdogາ">

   • ແທນ​ທີ່ dog.webp ແທນຊື່ຂອງໄຟລ image ຮູບ, ແລະຫຼັງຈາກ "alt" ໃສ່ຄໍາອະທິບາຍຂອງຮູບພາບ. ຄວາມາຍ ສູນກາງ ສໍາລັບ "ຊັ້ນ" ບໍ່ປ່ຽນແປງ, ເພາະວ່າເຈົ້າຈະສ້າງຊັ້ນ CSS ດ້ວຍຊື່ນັ້ນ.
2. 2 ຊອກຫາລະຫັດ CSS. ຖ້າເວັບໄຊທ has ຂອງເຈົ້າມີໄຟລ CSS CSS ແຍກຕ່າງຫາກ, ເປີດມັນ. ຖ້າບໍ່, CSS ສ່ວນຫຼາຍແມ່ນຢູ່ເທິງສຸດຂອງເອກະສານ HTML, ພາຍໃນແທັກ ຫົວ>... ເລື່ອນໄປທາງເທິງຂອງໄຟລ to ເພື່ອຊອກຫາແທັກ ຮູບແບບ> / ຮູບແບບ>.
   • ຖ້າແທັກ ຮູບແບບ> / ຮູບແບບ> ບໍ່, ເພີ່ມເຂົາເຈົ້າ. ອ່ານບົດຄວາມນີ້ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ.
3. 3 ເພີ່ມ CSS ເພື່ອຈັດຮຽງຮູບພາບ. ແທນ "50%", ເຈົ້າສາມາດໃສ່ຄ່າທີ່ແຕກຕ່າງເພື່ອເຮັດໃຫ້ຮູບພາບປາກົດຢູ່ໃນ ໜ້າ ເວັບ. ທ່ານຈະບໍ່ສາມາດເຮັດໃຫ້ຮູບພາບຢູ່ກາງດ້ວຍຄ່າ "100%", ສະນັ້ນຈໍານວນນີ້ຄວນແຕກຕ່າງ.

   .center {display: block; ຂອບຊ້າຍ: ອັດຕະໂນມັດ; ຂອບຂວາ: ອັດຕະໂນມັດ; ຄວາມກວ້າງ: 50%; }

4. 4 ບັນທຶກການປ່ຽນແປງຂອງທ່ານ. ບັນທຶກໄຟລ HTML HTML ແລະໄຟລ CSS CSS (ຖ້າມີ). ນີ້ຈະເຮັດໃຫ້ຮູບພາບຢູ່ກາງ.
   • ຍັງຢູ່ພາຍໃນ tags img> ສາມາດເພີ່ມ ເພື່ອວາງຮູບພາບທາງກາງ.

ວິທີທີ່ 2 ຂອງ 2: ຄຸນລັກສະນະ "ຈັດລຽງ" ໃນ HTML

1. 1 ສ້າງຫຍໍ້ ໜ້າ ໃ່. ເຖິງແມ່ນວ່າວິທີການກໍານົດຮູບຢູ່ທາງກາງໄດ້ຖືກຄັດຄ້ານ, ແຕ່ມັນຍັງໃຊ້ໄດ້ກັບຫຼາຍໂປຣແກຣມທ່ອງເວັບຢູ່. ແນວໃດກໍ່ຕາມ, ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ CSS ເພື່ອຮັກສາເວັບໄຊທ functional ທໍາງານຢູ່ເມື່ອຕົວທ່ອງເວັບຢຸດການສະ ໜັບ ສະ ໜູນ ຄຸນລັກສະນະທີ່ລະບຸໄວ້. ຈື່ໄວ້ວ່າຄຸນລັກສະນະ ຈັດລຽນ ຈະເຮັດໃຫ້ຮູບຢູ່ທາງກາງຢູ່ພາຍໃນອົງປະກອບທີ່ຢູ່ອ້ອມຮອບມັນ (ຕົວຢ່າງ: ພາຍໃນແທັກ p> / p> ຫຼື div> / div>). ເປັນຕົວຢ່າງ, ໃນເອກະສານ HTML, ພວກເຮົາຈະສ້າງຫຍໍ້ ໜ້າ ໃby່ໂດຍການເພີ່ມ p> ຢູ່ໃນເສັ້ນແຍກຕ່າງຫາກ.
2. 2 ເພີ່ມລະຫັດ HTML ສໍາລັບຮູບພາບ. ໃສ່ລະຫັດຕໍ່ໄປນີ້ຫຼັງຈາກແທັກ p>... ໃຊ້ຕົວຢ່າງນີ້ເປັນ ຄຳ ແນະ ນຳ:

   p> img src = "dog.webp" alt = "picture" align = "middle">

   • ແທນ​ທີ່ dog.webp ແທນຊື່ຂອງໄຟລ image ຮູບ, ແລະຫຼັງຈາກ "alt" ໃສ່ຄໍາອະທິບາຍຂອງຮູບພາບ.
   • ຄຸນລັກສະນະທາງກາງບອກຕົວທ່ອງເວັບໃຫ້ສະແດງຮູບພາບຢູ່ເຄິ່ງກາງຂອງ ໜ້າ.
3. 3 ປິດແທັກວັກ. ເພື່ອເຮັດສິ່ງນີ້, ເພີ່ມ / p> ຫຼັງຈາກປ້າຍຮູບ. ລະຫັດສໍາເລັດຮູບຄວນມີລັກສະນະຄືແນວນີ້:

   p> img src = "dog.webp" alt = "picture" align = "middle"> / p>

4. 4 ບັນທຶກການປ່ຽນແປງຂອງທ່ານ. ນີ້ຈະເຮັດໃຫ້ຮູບພາບຢູ່ກາງ.