css inline-block 으로 여러컨텐츠 중앙정렬

 

이렇게 각각의 li 2줄 컨텐츠를 가운데로 정렬해보자.

 

 

---

float 을 사용한다면?

 

 

기존처럼 li 에 float:left 를 사용한다면,

중앙정렬이 아닌 왼쪽정렬이 되고  밑에 3개도 옆으로 붙어버린다

 

이럴경우 html 에서 각각 감아서 class로 처리하는 방법도있으나 너무 복쟙..

 

---

display : inline-blok

 

 

• 요소는 inline 요소는? 내부는 block 처럼 표시
  >박스 모양이  inline 처럼 옆으로
• - width, height 사용불가. line-height (높이 조절) & text-aling (텍스트 정렬) 로 사용

 

---

 

li 에 display : inline-blok 을 설정 해준 후 

ul 에 text-align : center을 지정해주면 li 컨텐츠가 글자로 인식되어 자동 정렬이 된다.

 

 

 

 

만약 박스안의 글자가 너무 많아 넘쳐 흐른다면?

min-width 적용시 해결!

 

최소한으로 가지는 넓이를 지정해주어 떨어지지 않게 해준다. 

여기서 글자가 넘쳐 흐르지 않도록 overflow:hidden 과 padding도 적용

 

 

.sub_tab_fee {
    border: 1px solid black;
    margin-top: 50px;
    text-align: center;
}
.sub_tab_fee li {
    border: 1px solid #d9d9d9;
    border-radius: 50px;
    display: inline-block;
    min-width: 230px;
    margin: 0 8px 16px;
}
.sub_tab_fee li a {
    padding: 0 15px;
    line-height: 43px;
    font-size: 15px;
}

 

---

 

인라인 속성 참고

https://hyojinny.tistory.com/23?category=1094361 

css display란? (block, inline, inline-block)