[CSS ] 세로 가운데정렬 : align-self , align-items

justify-self 가 가로 정렬 이었다면

 

align-self 는 세로 정렬이다.

 

<style>
.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3 {background: PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}

  
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

---

align-self

3번 상자에 align-self 속성을 사용해보자

 

셀 내부의 세로 정렬

• start :  셀 내부의 위쪽에 정렬
• center : 셀 내부의 중심에 정렬
• end : 셀 내부의 밑에 정렬

.item3 {
    background: PaleTurquoise;
    align-self : start;
  }

---

.item3 {
    background: PaleTurquoise;
    align-self : center;
  }

---

.item3 {
    background: PaleTurquoise;
    align-self : end;
  }

---

 

 

align-items

 

모든 항목에 대해 그리드 세로 정렬 

 

<style>
.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3 {background: PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}

  
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

---

 

 align-items : start;

 

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    
     align-items : start;
  }

위쪽으로 정렬

 

---

 

align-items : center;

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    
     align-items : center;
  }

세로 가운데 정렬!!! ( 텍스트 세로 가운데 정렬을 하기 위해 vertical-align이나 baseline , line-height 속성을 공부하여 

적용 했는데 다 실패했었다)

 

이제 그리드 align-self , align-items를 사용하면 세로 가운데 정렬은 문제없다!!!

 

 

---

align-items : end;
  

아래쪽으로 정렬

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    
     align-items : end;
  }

 

---

실제로 화면 UI를 구현 하던 중

카드 폼 안에있는 글자를 세로 가운데 정렬하려고 많은 시행 착오를 겪었다.

const CardInfo = styled.div`
    
    display: grid;
    margin-left: 10px;
`;

div 태그 안에 있어서 vertical-align은 적용 되지 않았다.

 

vertical-align같은 경우 inline 이나 inline-block 요소에만 적용 되었다.

 

 

이때 align-items 속성을 사용하여

 

const CardInfo = styled.div`
    
    display: grid;
    align-items: center;
    margin-left: 10px;
`;

세로 가운데 정렬을 할 수 있었다.!!!

 

 

만약

 

align-items: end를 사용하면?

 

 

const CardInfo = styled.div`
    
    display: grid;
    align-items: end;
    margin-left: 10px;
`;

텍스트가 밑에 있는 것을 볼 수 있다.