텍스트 정렬...

텍스트 정렬...

QA

텍스트 정렬...

답변 1

본문

    <div class="main_image">
        <img src="/thema/Basic/images/fixer1.jpg" width="100%" height="100%">
        <h1 class="main_image_text">
        <a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=notice" style="font-size:50px; color: white;">현식재단사</a>
        </h1>
        <h2 class="main_image_text2" style="font-size:30px">손쉽게 신체사이즈 알맞게 측정하는 방법</h2>
        <h3 class="main_image_text3" style="font-size:20px">보통 집에 줄자 가지고 계신가요? 없는분들 많을거라 생각합니다. 그렇다면 손쉽게 신체사이즈 알맞게 측정 하는 방법 하나씩 배워보겠습니다. </h2>
</div>

  <style>
  .main_image {
    position: relative;
  }
  .main_image_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    color: white;
  }
  </style>

    <style>
  .main_image {
    position: relative;
  }
  .main_image_text2 {
    position: absolute;
    top: 53%;
    left: 20%;
    transform: translate( -50%, -50% );
    color: white;
  }
  </style>

    <style>
  .main_image {
    position: relative;
  }
  .main_image_text3 {
    position: absolute;
    top: 56%;
    left: 20%;
    transform: translate( -50%, -50% );
    text-align:center;
    color: white;
  }
  </style>

 

 

이미지 안에서 H1은 중앙 정렬을 두고 h2 부터는 이미지의 좌측부터 맞추고 싶은데... 어떻게 설정해야 되나요 ㅠㅠ 정렬이 안되서 고수님들 부탁드리겠습니다. 구글링에서 찾지 못해서 ㅠㅠ 이렇게 글남깁니다.

이 질문에 댓글 쓰기 :

답변 1


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      html,body{
        width: 100%;
        height: 100%;
      }
      .main_image {
        position: relative;
        height: 100%;
        background: url("/thema/Basic/images/fixer1.jpg") center center no-repeat;
      }
      .main_image_text {
        text-align: center;
      }
      .main_image_text a {
        color: #fff;
        font-size: 50px;
      }
      .main_image_text2 {
        color: #fff;
        font-size: 30px;
      }
      .main_image_text3 {
        color: #fff;
        font-size: 20px;
      }
      </style>
</head>
<body>
  <div class="main_image">
    <h1 class="main_image_text">
      <a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=notice">현식재단사</a>
    </h1>
    <h2 class="main_image_text2">손쉽게 신체사이즈 알맞게 측정하는 방법</h2>
    <h3 class="main_image_text3">보통 집에 줄자 가지고 계신가요? 없는분들 많을거라 생각합니다. 그렇다면 손쉽게 신체사이즈 알맞게 측정 하는 방법 하나씩 배워보겠습니다. </h2>
</div>
</body>
</html>

 

정렬은 앱솔루트로 쓰지마세요 정말 안좋은 버릇입니다.

 

이미지 때문에 어쩔 수 없는 거라면 배경으로 사용하시면 됩니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 3
© SIRSOFT
현재 페이지 제일 처음으로