깸자
241
2021-08-11 16:50:19
10
162

수직정렬 질문입니다.



<!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">
    <title>The Artisan - Catering & Deli</title>
    <style>
        #main_top { 
            background-image: url("C:/Users/김유진/Desktop/Artisan/picnic.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            height: 400px;

        }

        .opacityMain {
            background-color: rgba(0, 0, 0, 0.5);
            height: 400px;
            color : white;
            text-align: center;
            max-height: 400px;
        }
    </style>
</head>
<body>
    <div id="main_top">
        <div class="opacityMain">HELLO</div>
    </div>
</body>
</html>

해당 코드는 아래와 같이 구현이 되어 있는데요, 

배경 그대로에 텍스트만 수직 정렬하고 싶은데 가능할까요?


배경과 텍스트가 같은 div 에 구현이 되어 있어서,

magin이나 padding을 쓰면 배경 값도 움직이게 되고,

다른 flex 같은 것들을 사용해봤지만, 역시 배경이 문제인 것 같습니다.


어떤 방법이 있을까요....?



0
  • 답변 10

  • Mux
    401
    2021-08-11 16:55:55

    아래 line-height 속성을 추가해보시겠어요?

    #main_top {
        ... 생략 ...
        line-height: 400px;
    }


  • 깸자
    241
    2021-08-11 16:57:45

    Mux

    감사합니다! 실행이 되긴 하는데, 생각해보니 

    div안에 다시 텍스트를 넣는 방법도 있을 것 같다는 생각이 드네요!!

    line-height 으로는 px 말고 % 로는 불가능한게 맞나요?

  • Mux
    401
    2021-08-11 17:01:39 작성 2021-08-11 17:01:53 수정됨

    line-height의 속성을 파악하면 %로 지정할 수 있습니다.
    다만 추천하지 않습니다.

    #main_top {
        ... 생략 ...
        line-height: 2500%;
    }


  • 깸자
    241
    2021-08-11 17:02:31

    왜 추천하시지 않으시나요?

    잘 안 쓰이는 건가요?

  • Mux
    401
    2021-08-11 17:07:56

    퍼센트로 주게되면 폰트 사이즈를 기반으로 변하게 됩니다.
    퍼센트는 상위 엘리먼트의 속성을 따르지 않게되죠

  • Mux
    401
    2021-08-11 17:09:16

    다른 방법으로도 구현할 수 도 있습니다.

    [HTML]

    <!-- 코드를 살짝 보정했습니다. class 속성의 값을 케밥케이스로 모두 통일시켰습니다. -->
    <div id="main-top">
      <div class="opacity-main">
        <span>HELLO</span>
      </div>
    </div>


    [CSS]

    #main-top {
      background-image: url("C:/Users/김유진/Desktop/Artisan/picnic.jpg");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      height: 400px;
    }
    
    .opacity-main {
      max-height: 400px;
      height: inherit;
      color: #FFFFFF;
      position: relative;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .opacity-main > span {
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    


  • 깸자
    241
    2021-08-11 17:11:27

    늘 퍼센트로 주는게 크기 변경에 따라서 자유자재로 변한다고 생각해서 

    맞다고 생각했는데, 상위 엘리먼트를 따르지 않게 되는군요...!


    코드 작성까지.. 감사합니다! 참고해서 작성해보겠습니다 :)

  • RWB
    1k
    2021-08-11 17:19:19 작성 2021-08-11 17:19:59 수정됨


    .opactyMain {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    그냥 별다른 거 없이 위에 코드만 추가해주시면 됩니다.

  • Mux
    401
    2021-08-11 17:21:35

    RWB님 말씀대로 flex box를 이용하여 가운데 정렬하는 것도 괜찮습니다.

    모든 요소를 수직 정렬해야된다면 flex box가 더 좋을 수도 있습니다.

  • 깸자
    241
    2021-08-12 09:31:46

    감사합니다!!

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