[CSS] 객체 2개이상을 가로정렬하여 가운데 배치하기

by

객체 2개이상을 가로정렬하여 가운데 배치하기

<div class="box">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>

.box{
 text-align: center;
}
.item{
 width: 50px;
 height: 50px;
 background-color: green;
 display: inline-block;
 margin: 5px;
}

결과

 

객체 2개이상을 정중앙에 배치하기

<div class="box">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
.box{
 text-align: center;
 display: flex;
 justify-content: center;
 align-items: center;
}
.item{ width: 50px;
 height: 50px;
 background-color: green; display: inline-block; margin: 5px; }

결과

 

두발로 남성용 스포츠 커버 밴딩 양말 10켤레
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

Leave a Comment