[HTML/CSS 간단 TIP] 가운데 정렬 시키기 css코드

내용을 가운데 정렬하고 싶으신 분들 잘 오셨습니다.

​

결과부터 말하자면

.class_name{
    display:block;
    margin-left: auto;
    margin-right: auto;
}

가운데 정렬 코드 3개를 css파일에 넣어주거나 style로 추가하시면 됩니다.

​

상세한 과정을 원하신다면 계속 읽으시면 됩니다

정렬이 잘 되는지 쉽게보기 위해서 이미지를 넣어보겠습니다

    <img src="jang_go.png" class="center">
    
    <h3 class="name">Jang go</h3>
    
    <div class="hello">
        <p>안녕하세요 냉장고입니다.</p>
    </div>

img 코드를 넣고 class이름은 center로 만들어 보겠습니다.

​

그냥 사진만 두면 허전하니까 이름을 h3태그로 추가하고, 인사말을 간단하게 넣어보겠습니다.

둘다 class가 필요합니다.

이름의 class를 name으로, 인사말의 class를 hello라고 만들어 보

겠습니다.

일단 사진이 너무 크니 css파일로 가서 너비를 작게 지정해보겠습니다.

높이는 자연스레 비율에 맞춰서 줄어들기 때문에 길쭉하게 되지 않을까 걱정하지 않으셔도 됩니다.

이제 마법의 3코드를 넣어보겠습니다.

나머지 이름과 인사말또한 class를 만들고 가운데 정렬을 해보겠습니다.

흠...이미지는 가운데정렬이 되었지만 이름과 인사말이 그대로 입니다.

​

text가 들어가는 태그는 중앙정렬을 위해서는 다른 코드가 필요합니다.

text-align: center;

를 넣어주면 가운데 정렬 가능합니다.

중앙정렬 잘 되었습니다.

 

성공하셨기를 바라면서~~ 저는 이만!!