html5 상용구 센터 로고

Question

나는 html5 boilerplate과 그 .ir 클래스를 사용하고 있습니다. 로고를 클릭 할 수있게 만들었으므로 페이지 중심으로 배치하고 싶지만 지금까지는 아무런 운이 없었습니다. 나는 여백을 시험했다 : 0 자동; 텍스트 정렬 : 가운데; 그러나 둘 다 작동하지 않는 것 같습니다.

HTML

<a href="/"><h1 class="ir">logo header</h1></a> 

과 CSS를

h1 { 
    height: 373px; 
    } 

    .ir { 
    display: block; 
    border: 0; 
    text-indent: -999em; 
    overflow: hidden; 
    background-color: transparent; 
    background-repeat: no-repeat; 
    text-align: left; 
    direction: ltr; 
    *line-height: 0; 
    background-image: url(http://i.imgur.com/yYnyJ.jpg); 
    } 
    .ir br { display: none; } 

Answer 1

에 다음을 추가합니다. 정렬 이미지를 맨 위에 놓고 동시에 가운데에 배치하려면 값으로 top center을 사용할 수 있습니다.

_{참고 :: 이미지 크기는 <h1>보다 작아야합니다.}

또한 속기 속성도 사용하는 것이 좋습니다.

.ir { 
    display: block; 
    border: 0; 
    text-indent: -999em; 
    overflow: hidden; 
    text-align: left; 
    direction: ltr; 
    *line-height: 0; 
    background: url(http://i.imgur.com/yYnyJ.jpg) transparent no-repeat center; 
} 

Answer 2

규칙에 background-postion: center; 추가 .IR

background-position: center center; 

Answer 3

도우미 클래스에 스타일을 직접 추가하지 않는 것이 좋습니다. 즉, 대체 할 배경이있는 경우 다시 .ir 클래스가 필요한 다른 경우에는 다시 사용할 수 없습니다. 과 같이 당신의 배경을 추가

<h2 class="ir myh2classname"></h2> 

다음을 :

.myh2classname { 
    background: url(http://i.imgur.com/yYnyJ.jpg) transparent no-repeat center; 
} 

당신이있는 경우에이 방법을 사용하면 클래스에 추가하여 이미지로 교체 할 마크 업에 클래스 명을 추가하십시오이 같은 ir라고 다음

<h3 class="ir anotherimagereplacement"></h3> 

를 실행 한 다음, 당신이 다른 섹션을 배경으로 사용할 다른 이미지는, 당신이해야 할 모든 섹션의 마크 업에 다른 클래스 이름을 추가하는 것입니다 다음과 같은 다른 섹션의 배경을 추가하십시오 :

.anotherimagereplacement { 
     background: url(path/to/image); 
    }