Layout ng CSS - Horizontal at Vertical Alignment

元素居中

水平和垂直居中的元素

居中对齐元素

要使块元素（例如

）水平居中，请使用 margin: auto;。

设置元素的宽度将防止其延伸到容器的边缘。

然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：

这个 div 元素是居中的。

Example

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

Try it yourself

Babala:如果未设置 width attribute (o i-set sa 100%), ang tumutugma sa gitna ay hindi magiging epektibo.

tumutugma sa gitna ang teksto

Kung gusto mong ilagay ang teksto sa gitna ng elemento lamang, gamitin mo ang text-align: center;:

ang teksto na ito ay tumutugma sa gitna.

Example

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

Try it yourself

Tip:Para sa mas maraming halimbawa kung paano itutugma ang teksto, tingnan ang Text ng CSS ang kaniyang kabanata.

tumutugma sa gitna ang imahe

Kung gusto mong ilagay sa gitna ang imahe, i-set mo ang parehong malayong gilid bilang autoat gawing block element:

Example

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

Try it yourself

Left and right alignment - gumamit ng position

Isang paraan para sa alignment ng elemento ay gumamit ng position: absolute; :

Ang div na ito ay nakaposisyon sa kanan.

Example

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

Try it yourself

Babala:ang mga elemento na may absolute positioning ay mawawala sa normal na flow at maaaring magkaroon ng pagkalabag ng elemento.

Left and right alignment - gumamit ng float

isang ibang paraan para sa alignment ng elemento ay gumamit ng float Atribute:

Example

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

Try it yourself

Babala:Kung ang elemento ay mas mataas kaysa sa kanyang naglalagay at ito ay floating, ito ay maaaring lumubog sa kanyang container. Maaari mong gamitin clearfix hack upang malutas ang problema na ito (tingnan ang sumusunod na halimbawa).

clearfix Hack

Pagkatapos, maaari naming idagdag sa naglalagay na elemento ang overflow: auto;upang malutas ang problema na ito:

Example

.clearfix {
  overflow: auto;
}

Try it yourself

Vertical alignment - gumamit ng padding

May maraming paraan para sa vertical alignment ng mga elemento sa CSS. Isang simpleng solusyon ay gumamit ng top at bottom padding:

Ako ang nakapokus sa itaas.

Example

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

Try it yourself

Kung gusto mong magkakapareho ang alignment sa vertical at horizontal, gamit ang padding atong text-align: center;:

I am horizontally and vertically centered.

Example

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

Try it yourself

Vertical alignment - gumamit ng line-height

isang bagong teknika ay gumamit ngang iyong halagaay katumbas ng height Atribute value of line-height Atribute:

I am horizontally and vertically centered.

Example

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* Kung may ilang linya ng teksto, magdagdag ng mga sumusunod na code: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Try it yourself

Vertical alignment - gumamit ng position at transform

kung ang iyong pinili ay hindi padding atong line-heightkaya ang isa pang solusyon ay gumamit ng position atong transform Atribute:

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: pumiliin (-50%, -50%);
}

Try it yourself

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

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.