<section> 배경에 텍스트가 가운데 정렬되지 않는 이유는 무엇입니까?

나는 HTML과 CSS를 배우고있다. 내 <h3> 텍스트가 페이지 가운데에 정렬되지 않습니다. 이것은 배경 너비가 50 % 인 것과 관련이 있다는 것을 알고 있지만 페이지가 두 가지 색상이되도록하려면이 것이 필요합니다. 이 주변의 어떤 방법?<section> 배경에 텍스트가 가운데 정렬되지 않는 이유는 무엇입니까?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<!-- Required meta tags always come first --> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<meta http-equiv="x-ua-compatible" content="ie=edge"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
<link rel="stylesheet" href="css/style.css"> 
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet"> 
<link rel="stylesheet" href="font-awesome/css/font-awesome.css"> 

</head> 
<body> 
    <!-- HEADER --> 
    <section id="header"> 

     <h1 class="name">Jessica Shae</h1> 


     <div class="container heading"> 
      <div class="row"> 

       <div class="col-md-4"> 
        <img src="img/7.jpg" class="display"> 
       </div> 
       <div class="col-md-4"> 
        <img src="img/2.jpg" class="display"> 
       </div> 
       <div class="col-md-4"> 
        <img src="img/9.jpg" class="display"> 
       </div> 

       <div class="row"> 
        <div class="col-md-12 text-xs-center"> 
         <a href="#gallery"<i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i></a> 

      </div> 
     </div> 


    </section> 

    <!-- Gallery --> 

    <section id="gallery"> 

     <h2 class="title">The Dark Room</h2> 

     <div class="container photo-collection"> 
      <div class="row"> 

       <div class="col-md-4 affect"> 
        <img src="img/1.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/10.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/4.jpg" class="work"> 
       </div> 
      </div> 

      <div class="row"> 

       <div class="col-md-4 affect"> 
        <img src="img/18.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/6.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/8.jpg" class="work"> 
       </div> 
      </div> 

      <div class="row"> 

       <div class="col-md-4 affect"> 
        <img src="img/12.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/11.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/14.jpg" class="work"> 
       </div> 
      </div> 

     </div> 




    </section> 

    <section class="contact-me"> 
     <div class="contact"> 
      <h3>Contact Me</h3> 
     </div> 


    </section>

그리고 내 CSS :

텍스트 정렬하기 때문에

* { 
    /*background-color: rgb(0, 0, 0);*/ 
    background: #070606; 
} 

/* HEADER */ 

.display { 
    height: auto; 
    width: 500px; 
    box-sizing: border-box; 
    overflow: hidden; 
    overflow-x: hidden; 
    max-width: 100%; 
    border: 4px solid white; 
    border-radius: 6%; 
} 

.heading { 
max-width: 100%; 
} 

.name { 
     font-family: 'Oswald', sans-serif; 
     text-transform: uppercase; 
     font-size: 500%; 
     font-weight: 100; 
     text-align: center; 
     color: whitesmoke; 
     width: 100%; 
     margin-bottom: 20px; 
     margin-top: 15px; 
} 

h1:after { 
     display: block; 
     height: 2px; 
     background-color: #e62222; /*Great way to give single line color */ 
     content: " "; 
     width: 100px; 
     margin: 0 auto; 
     margin-top: 20px; 
} 

.fa { 
     margin-top: 18px; 
} 

.fa:link, /*Prevents color change when clicked */ 
.fa:visited { 
       text-decoration: none; 
       color: #bdc3c7; 
} 

.fa:hover, 
.fa:active { 
      color: #ebedee; 
} 


/* GALLERY */ 


.work { 
     width: 300px; 
     height: 100%; 
     margin-top: 60px; 
     margin-bottom: 60px; 
     border: 3px solid white; 
     } 

.title { 
     font-family: 'Prociono', serif; 
     font-size: 350%; 
     color: whitesmoke; 
     text-align: center; 
     padding-top:40px; 

} 

.affect img { 
      opacity: 0.2; 
      background-color: #070606; 
      transition: opacity .35s, transform .35s; 
      transform: scale(1.0); 
} 

    .affect:hover img { 

    opacity: 1; 
    transform: scale(1.15); 

} 

/* CONTACT */ 

.contact { 
    background: linear-gradient(to right, black 50%, gray 50%); 
} 

h3 { 
    color: white; 
    text-align: center; 
}

출처

2016-11-03 Temple Naylor

int를 다른 div에 넣으시겠습니까? – durbnpoisn

나는 그것을 시도했다, 그것은 작동하지 않는다. –

"배경 폭이 50 % 인 것과 관련이 있다는 것을 알고 있지만 페이지가 두 가지 색상이되도록하려면이 것이 필요합니다." 이 작업을 수행하지 않고 2 색 배경을 얻는 방법은 여러 가지가 있습니다. 가장 쉬운 방법은 다음과 같이 두 가지 색상의 선형 그라디언트를 사용하는 것입니다. background : linear-gradient (오른쪽, 빨간색 50 %, 파란색 50 %); 배경을 사용할 수도 있습니다 이미지 또는':: before' 및':: after' 의사 요소를 포함 할 수 있습니다. –

CSS에서이 규칙은 모든 요소를 잡는 와일드 카드 선택자인 별표를 사용하므로 모든 요소의 배경색을 # 070606으로 설정합니다. 당신이 해당 색상으로 페이지의 배경색을 설정하는 것을 의미하는 경우

* { background: #070606; }

, body 대신 * 사용합니다.

출처

2016-11-03 21:35:46

트릭을 수행했습니다! 감사합니다. –

m 귀하의 질문을 해결 한 것으로 대답합니까? 감사! :) –

물론! 내 사과. –

당신의 텍스트를 중심으로하지 않습니다 : 그것은이 50 % 넓은 사업부를 중심으로 뜻 있도록 센터는 부모의 폭을 의미한다. 그것을 중심에 놓기 위해 당신은 상대적인 위치를 가진 래퍼에 h3와 h3을 래핑 할 수 있습니다. 그런 다음 위치 절대 값을 h3 (이 값을 .contact div 밖으로 이동해야 함)로 설정하고 h3의 너비를 100 %로 설정합니다. 그렇게해야합니다. 절대적으로 당신이 부모님의 신장을 설정해야한다면, 포지션한다면 기억하십시오.

.contact { 
 
     background-color: black; 
 
     background-attachment: fixed; 
 
     background-size: cover; 
 
     width: 50%; 
 
     overflow-x: hidden; 
 
     position: absolute; 
 
     height:100%; 
 
    } 
 

 
h3 { 
 
     text-align: center; 
 
     font-size: 300%; 
 
     position: absolute; 
 
     width:100%; 
 
} 
 
.wrapper{ 
 
position:relative; 
 
    height:200px; 
 
}

<section class="wrapper"> 
 
    <div class="contact"></div> 
 
    <h3>Contact me</h3> 
 
    </section>

그러나이 예는 가장 좋은 방법이 아닙니다. 이 경우 가장 좋은 방법은 색상이 50/50 인 상위 컨테이너에 그라디언트 배경 (주석 스 니펫에 표시된 것과 같이)을 만드는 것입니다. 이렇게해도 HTML 구조와 CSS 코드가 지저분 해지지는 않습니다.

출처

2016-11-03 21:33:12

<section> 배경에 텍스트가 가운데 정렬되지 않는 이유는 무엇입니까?

답변

관련 문제