CSS 布局 - 水平和垂直对齐

ປະກອບສະແດງສະແດງຕົວຢູ່ກາງ

ປະກອບສະແດງສະແດງຕົວຢູ່ກາງທັງຊົງທີ່

ສະແດງຕົວຢູ່ກາງ

ສະແດງຕົວຢູ່ກາງປະກອບສະແດງທີ່ເປັນບັນດາສິ່ງຂັ້ນນັ້ນ (ອີງ: <div>) margin: auto;.

ກະຕຸ້ມອາຍຸປະກອບສະແດງຈະປ້ອງກັນປະກອບສະແດງຈາກການຂຶ້ນຫຼາຍອອກຈາກຂອບເຂດຂອງບັນດາອົງກອນ

ຫຼັງຈາກນັ້ນ ປະກອບສະແດງຈະໃຊ້ອາຍຸດັ່ງກ່າວ ແລະອາຍຸສິ່ງເກີນກວ່າຈະແບ່ງແຍກພາຍໃນຂອບເຂດປີກຂາວຂາຍຍາວ

ປະກອບສະແດງ div ນີ້ສະແດງຕົວຢູ່ກາງ

Example

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}

Try it yourself

ເຫັນທີ່:ຖ້າບໍ່ໄດ້ກະຕຸ້ມ width ປະສົມຄວາມຂອງ (ຫຼືກະຕຸ້ມເປັນ 100%) ສະແດງຕົວຢູ່ກາງຈະບໍ່ມີຜົນ

ສະແດງຕົວຢູ່ກາງ

ຖ້າພຽງແຕ່ຈະສະແດງຕົວຂໍ້ຄວາມຢູ່ໃນປະກອບສະແດງພຽງຢ່າງດຽວ text-align: center;:

ຂໍ້ຄວາມນີ້ສະແດງຕົວຢູ່ກາງ

Example

.center {
  text-align: center;
  border: 3px solid green;
}

Try it yourself

Tip:ສະແດງຕົວຫຼາຍກວ່ານີ້ໃນການຕິດຕາມຂໍ້ຄວາມ ການສັນຍາຂໍ້ຄວາມ CSS ບົດນີ້

ສະແດງຕົວຢູ່ກາງ

ສະແດງຕົວຢູ່ກາງພາບຫຼັງຈາກການກະຕຸ້ມຂອບເຂດປີກຂາວຂາຍຍາວ autoແລະຈະຕັ້ງເປັນປະກອບສິ່ງທີ່ຖືກຈັດກະຈາຍ:

Example

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Try it yourself

ການຈັດກະຈາຍທີ່ຕາມສາຍຊ້າຍ - ນຳໃຊ້ position

ວິທີທີ່ອື່ນຫນື່ງຈະເປັນການໃຊ້ position: absolute; :

ດັ່ງນັ້ນ div ນີ້ຈະຈັດກະຈາຍທີ່ຕາມສາຍຊ້າຍ.

Example

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

Try it yourself

ເຫັນທີ່:ປະກອບສິ່ງທີ່ຈະຕັ້ງຕັດພາຍໃນການໄຫລ່ພາຍໃນສາຍພາບທີ່ບໍ່ມີການສະແດງທີ່ບາງຄັ້ງຈະມີການຂວ້າງຄວາມຂອງປະກອບສິ່ງ.

ການຈັດກະຈາຍທີ່ຕາມສາຍຊ້າຍ - ນຳໃຊ້ float

ວິທີທີ່ອື່ນຫນື່ງຈະເປັນການໃຊ້ float ປະກອບສາຍ:

Example

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Try it yourself

ເຫັນທີ່:ຖ້າປະກອບສິ່ງຈະຍາວກວ່າປະກອບສິ່ງທີ່ລວມມັນແລະມັນຈະລົງການຮົບ, ເພື່ອຈະໃຊ້ clearfix hack ເພື່ອແກ້ໄຂບັນຫານີ້ (ຄວນເບິ່ງຫລັງກ່າວໃຫ້).

clearfix Hack

ຫລັງຈາກນັ້ນພວກເຮົາສາມາດເພີ່ມ overflow: auto;ເພື່ອແກ້ໄຂບັນຫານີ້:

Example

.clearfix {
  overflow: auto;
}

Try it yourself

ການຈັດກະຈາຍທີ່ຕໍ່າຂື້ນ - ນຳໃຊ້ padding

ມີຫລາຍວິທີທາງວິສະວະກອນ CSS ທີ່ຈະຈັດກະຈາຍຂໍ້ຄວາມທີ່ຕໍ່າຂື້ນ. ການແກ້ໄຂທີ່ງາມຫລາຍຄວນຈະເປັນການໃຊ້ການເພີ່ມຂອບເຂດພາຍໃນ:

ຂ້ອຍຈະຢູ່ທີ່ກາງຂອງທີ່ຕໍ່າຂື້ນ.

Example

.center {
  padding: 70px 0;
  border: 3px solid green;
}

Try it yourself

ຖ້າທ່ານຕ້ອງຈັດກະຈາຍທີ່ຕໍ່າຂື້ນແລະພັດທະນາທີ່ຕໍ່າຂື້ນຫນື່ງພຽງແຕ່ນຳໃຊ້ padding ແລະ text-align: center;:

I am horizontally and vertically centered.

Example

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Try it yourself

ການຈັດກະຈາຍທີ່ຕໍ່າຂື້ນ - ນຳໃຊ້ line-height

ການແກ້ໄຂອື່ນໆຈະເປັນການໃຊ້ຄວາມຈຳນວນຂອງມັນຕົງກັບ height ປະສົງຄັດຂອງ line-height ປະກອບສາຍ:

I am horizontally and vertically centered.

Example

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* ຖ້າມີຂໍ້ຄວາມຈຳນວນຫລາຍເລື່ອງນີ້ໄດ້ສະເໜີການແບບກໍ່ຕ້ອງເພີ່ມການໃຫ້: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Try it yourself

ການຈັດກະຈາຍທີ່ຕໍ່າຂື້ນ - ນຳໃຊ້ position ແລະ transform

ຖ້າຄຳວ່າຂອງທ່ານບໍ່ແມ່ນ padding ແລະ line-heightແລະຫນື່ງການແກ້ໄຂອື່ນໆຈະເປັນການໃຊ້ position ແລະ transform ປະກອບສາຍ:

I am horizontally and vertically 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%);
}

Try it yourself

Tip:You will be in 2D Transformation This chapter will learn more about the transform property.

Vertical Alignment - Using Flexbox

You can also use flexbox to center content. Note that IE10 and earlier versions do not support flexbox:

I am horizontally and vertically centered.

Example

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

Try it yourself

Tip:You will be in my CSS Flexbox You will learn more about Flexbox in this chapter.