EverGiver

중앙정렬 본문

Front-End (웹)/CSS

중앙정렬

친절한개발초보자 2021. 7. 23. 21:21
728x90
  • text-align:center;
    : 글자를 중앙 정렬하는 css 속성
  • margin:0 auto;
    : 글자가 아닌 태그를 중앙정렬 시키는 방법
  • line-height:값px
    : 글자를 세로 기준 중앙 정렬시키는 css속성
    → 입력하는 값은 세로 길이와 동일하게 주면 정확하게 중앙으로 간다.
  • <img> 태그
    - 보통의 방법으로는 중앙 정렬이 되지 않는다
    - 해결방법
      1. display:block 속성을 가진 태그(div, h, p기왕이면 div) 감싸준다.
      2. img 크기와 똑같은 가로세로 값을 준다.
      3. display:block 태그한테 margin:0 auto 넣어주면 중앙 정렬이 된다.
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>중앙정렬 #1</title>
    <style>
        *{margin:0;padding:0}
        img{width:300px;height:300px;}
        div{width:300px;height:300px;
            margin:0 auto;}
        
        p{width:300px;height:300px;
            background-color:#123456;
            margin:0 auto;
            color:white;font-size:30px;
            text-align:center;
            line-height:300px;}
    </style>
</head>
<body>
    <div><img src="7.jpg" alt=""></div>
    
    <p>p태그입니다</p>
</body>
</html>​
728x90
저작자표시

'Front-End (웹) > CSS' 카테고리의 다른 글

float 속성  (0) 2021.07.28
background 속성  (0) 2021.07.26
박스 모델과 CSS 속성  (0) 2021.07.22
display 속성  (0) 2021.07.21
CSS 속성  (0) 2021.07.19
'Front-End (웹)/CSS' Related Articles more
Comments