Dandy Now!
  • [ 언어·프레임워크/HTML·CSS ]
    [CSS] 가로/세로 중앙-가운데-정렬(Tailwind 추가)
    2022년 11월 03일 12시 52분 18초에 업로드 된 글입니다.
    작성자: DandyNow
    728x90
    반응형

    1. div 태그 가로/세로 중앙-가운데-정렬

    [그림 1] div 태그 안 텍스트가 가운데-중앙 정렬 되었다.

     

    • flex 사용시 : div태그의 경우 flex와 margin으로 가운데 정렬할 수 있다. 
    .outer {
  display: flex;
}
.inner {
  margin: auto;
}

     

    • grid 사용시
    place-items: center;
display: grid;

     

    출처
    https://hianna.tistory.com/675

     

    2. Tailwind의 경우 flex 또는 grid를 이용

    • flex flex-col align-center
    • grid place-items-center

     

    출처
    https://eight20.tistory.com/53

    2024-09-27 추가

    3. 가로/세로 가운데 정렬 4가지 방법(최종)

    <!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div:nth-child(1) {
            background-color: aqua;
            height: 100px;
            display: flex;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;
            margin-bottom: 30px;
        }
        div:nth-child(2) {
            background-color: aqua;
            height: 100px;
            margin-bottom: 30px;
            line-height: 100px;
            text-align: center;
        }
        div:nth-child(3) {
            background-color: aqua;
            height: 100px;
            margin-bottom: 30px;
            align-content: center;
            text-align: center;
        }
        div:nth-child(4) {
            background-color: aqua;
            height: 100px;
            margin-bottom: 30px;
            display: flex;
        }
        button {
            margin: auto;
        }
    </style>
</head>

<body>
    <div><button>Button</button></div>
    <div><button>Button</button></div>
    <div><button>Button</button></div>
    <div><button>Button</button></div>
</body>

</html>
    728x90
    반응형
    저작자표시 비영리 변경금지

    '언어·프레임워크 > HTML·CSS' 카테고리의 다른 글

    [HTML] 당신이 잘 모르는 8가지 HTML 팁 - 번역  (0) 2022.12.11
    [Bootstrap] SearchBar components 배치 방법  (0) 2022.11.14
    [CSS] 동그라미 안에 텍스트 넣기, 대각선 그리기  (0) 2022.10.30
    CSV to JSON, CSV를 JSON으로 변환!  (0) 2022.09.28
    [CSS] 이미지 맵(Image Map)에 각각 다른 툴팁(Tooltip) 적용  (1) 2022.09.25
      댓글

    티스토리툴바