인프런 커뮤니티 질문&답변

div class='back'부분의 p와 a태그를 div class='back'안에서 수직중앙정렬되게 하려면 어떻게 해야하는지 궁금합니다.

영상에서는 padding을 주시고 box-sizing:border-box;로 height:inherit(200px)안에서 벗어나지 못하도록 하셨는데 그 방법이 아닌 또 다른 방법으로 텍스트들이 한번에 수직중앙정렬되게 하는 방법은 없을까요?

왼쪽은 padding과 box-sizing으로 가운데로 보낸 경우, 오랜쪽은 padding이랑 box-sizing은 주석처리한 모양입니다.

제가 원하는 바입니다. padding이랑 box-sizing을 쓰지 않고 p태그와 padding이 들어간 a태그가 전부 div back안에서 div back의 가장 윗부분과 아랫부분에서 같은 거리에 위치하도록 하고 싶습니다.

아래는 제가 쓴 css입니당 아직 hover되는 건 안했습니다

 

 

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
body {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 13px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #f4f4f4;
}
.items{
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  justify-content: space-evenly;
}
a{
  text-decoration: none;
  color: black;
}
.item {
  width: 250px;
  height: 200px;
  text-align: center;
  border: 1px solid black;
  position: relative;
}
.front{
  width: 100%;
  height: inherit;
  position: absolute;
  /* z-index: 1; */
}
.front img{}
.front h3{
  margin: 0;
  padding: 0;
}
.back{
  width: 100%;
    height: inherit;
    border: 1px solid red;
    line-height: 1.5em;
    position:absolute;
    padding-top: 20px;
    box-sizing: border-box;
}
.back p{
  margin: 3px 8px;
}
.back a{
  display: inline-block;
  margin-top: 10px;
  padding: 3px 8px;
  background-color: #bac8ff;
  border-radius: 3px;
}