중앙정렬

text-align: center;로 가운데 정렬하기

넓은 영역을 가지고 있는 요소에 text-align: center;를 주면 그 안에 있는 inline요소는 가운데 정렬을 한다.
만약 block요소를 가운데 정렬해야 한다면 display: inline-block;으로 inline요소로 변경하면 된다. (단, float값을 주면 안된다)

text-align: center;를 준 요소의 영역 strong태그

p태그는 block요소라 가운데 정렬이 안됨
(단, 글씨만 center를 상속받아 p영역 안에서 가운데 정렬함)

1i태그
1i태그

html은 <div class="area"> <strong> strong태그 </strong> <p> p태그 </p> <ul> <li> li태그 </li> <li> li태그 </li> </ul> </div> css는 .area{text-align: center;} .area ul li{display: inline-block;} /* block요소라도 display: inline-block;을 주면 가운데 정렬을 할 수 있다. */

float값으로 정렬한 요소를 꼭 가운데 정렬해야 하는 경우 (float를 준 요소를 감싸는 요소에 display: inline-block;을 준다)

text-align: center;를 준 요소의 영역

1i태그
1i태그
1i태그

하지만, 여러줄일 경우는 안됨

1i태그
1i태그
1i태그
1i태그
1i태그
1i태그
1i태그
1i태그
1i태그

html은 <div class="area"> <ul> <li> li태그 </li> </ul> </div> css는 .area{text-align: center;} .area ul{display: inline-block;} .area ul li{float: left;} /* float를 준 요소를 감싸고 있는 요소를 inline요소로 변경하면 가운데 정렬이 가능 */

float값으로 정렬한 요소를 꼭 가운데 정렬해야 하는 경우 (여러줄일때)

text-align: center;를 준 요소의 영역

1i태그
1i태그
1i태그
1i태그
1i태그
1i태그
1i태그
1i태그
1i태그

css는 .area{text-align: center;} .area ul{font-size: 0;} .area ul li{display: inline-block;} /* li를 감싸는 ul에서 font-size: 0;을 줘서 li 사이에 발생할 수 있는 여백을 삭제 (inline-block은 사이에 빈칸하나의 여백이 발생한다)*/

margin: 0 auto;로 가운데 정렬하기

넓이가 고정인 요소를 가운데 정렬할 경우 사용한다.
가운데 정렬할 요소는 반드시 block요소이어야하고, width가 고정이어야 한다.

text-align: center;를 준 요소의 영역

기업가는 문제 해결을 위해 노력하고 답을 찾아내는 사람입니다. 옐로모바일은 이러한 기업가 정신으로 새로운 문제에 도전하고 세상을 개선해 나갈 것입니다.

html은 <div class="area"> <p> 기업가는 문제 해결을 위해 노력하고 답을 찾아내는 사람입니다. 옐로모바일은 이러한 기업가 정신으로 새로운 문제에 도전하고 세상을 개선해 나갈 것입니다. </p> </div> css는

.area p{
    width: 300px;
    margin: 0 auto;
}