NARUHODO
400
2021-11-26 07:47:09
2
111

안녕하세요 선배님들!! html,css 관련해서 질문 있습니다


home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="/static/style.css">
    <title>My Cities</title>
</head>
<body>
    <div class="container">
        <header class="article_heading">
            <nav>My Cities</nav>
        </header>
                    <br/>

        <div class="article_items">London</div>
                    <br/>

            <div class="article_paragraph">
                London is the capital of England.
            </div>
                    <br/>

        <div class="article_items">Paris</div>
                    <br/>

            <div class="article_paragraph">
                Paris is the captial of France.
            </div>
                    <br/>
        <div class="article_items">Tokyo</div>
                    <br/>
            <div class="article_paragraph">
                Tokyo is the capital of Japan.
            </div>
    </div>
</body>
</html>


style.css

html,body{
    height:100%;
}

.container{
    height:100%;
    display:flex;
    flex-direction: column;

}

.article_heading{
    height:25%;
    background-color:#add8e6;
    text-align: center;

    font-family: 'Times New Roman', Times, serif;
}

.article_items{
    height:10%;
    background-color: #ff6347;
    text-align: center;

    font-family: 'Times New Roman', Times, serif;
}

.article_paragraph{
    
    text-align: center;

    font-family: 'Times New Roman', Times, serif;
}


Result


선배님들 안녕하세요! html을 갓 시작하게된 개발린이 입니다.

div 태그 내에 글자를 삽입하였는데요.

이 글자를 좌우 중앙은 text-align 방식으로 맞췄는데

상하 중앙은 이상하게 top:50%도 안먹고 어떤 방식으로 접근해야할지 모르겠네요.

div 태그 내에 말고 <h1>태그로 한번 감싸줘야하는건지 감이 안 잡힙니다..

도와주세요!


0
  • 답변 2

  • dev_lhh
    4
    2021-11-26 09:20:43

    flex 속성에 대해 더 봐보세요..!

    .article_heading{
    height:25%;
    background-color:#add8e6;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    justify-content: center;
    align-items: center;
    }
  • 20170923
    2k
    2021-11-26 10:26:15

    line-height

  • 로그인을 하시면 답변을 등록할 수 있습니다.