컴퓨터는 잘못이 없다..

[CSS]카드뷰 안에 contents 배치(div 수직,수평 중앙정렬) 본문

공부/CSS

[CSS]카드뷰 안에 contents 배치(div 수직,수평 중앙정렬)

도토리까꿍v 2021. 3. 17. 15:29
Contents 접기

[코드]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step07_Final.html</title>
<!-- bootstrap css 로딩-->
<link rel="stylesheet" href="./css/bootstrap.css"/>
<style>


    /*부모요소의 items를 center로*/
    .row로
        /*display: flex;*/
        align-items: center;
        height: 200px;
    }


    /*자식요소의 text-align를 center로*/
   div{
       text-align: center;
   }


</style>
</head>
<body>

    <div class="container">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-3">
                            <p>사진</p>
                            <p>하트|수정|삭제</p>
                    </div>
                    <div class="col-7">
                        <p>왜 먹질 못하니 왜 먹질 못하니 왜 먹질 못하니 왜 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니</p><br>
                        <p>-운수 좋은날, 현진건</p>
                    </div>
                    <div class="col-2">
                        <p>
                            공유하기
                        </p>
                    </div>
                </div>
            </div>
        </div>
      
    </div>
</body>   
</html>

 

[실행결과]

 

 

[설명]

저작자표시

'공부 > CSS' 카테고리의 다른 글

[CSS]부트스트랩 Grid System 사용예제_수직정렬 테스트  (0) 2021.01.21
[CSS]부트스트랩 문서 확인하기(그리드)  (0) 2020.11.17
[CSS] 부트스트랩 문서 참고하는 방법  (0) 2020.11.17
'공부/CSS' Related Articles more
Comments