나는 그것이 단순해야한다고 생각되는 무엇인가에 난처하지 않습니다!헤더에 로고 배경 이미지와 텍스트를 센터링하는 방법?

<header>의 가운데에 로고를 센터링하려고합니다. 로고는 <a>으로 구성되며 배경 이미지는 로고 아이콘이고 앵커 텍스트는 로고 이름입니다. <h1>에 margin: 0 auto;을 사용하여 로고 아이콘을 가운데에 배치했지만 아이콘과 텍스트를 하나의 단위로 함께 배치하는 좋은 해결책을 찾을 수 없습니다.

<header> 
    <h1> 
    <a href="#" class="logo">Logo Name</a> 
    </h1> 
</header>

CSS :

header h1 { 
    height: 54px; 
    width: 54px; 
    background: url('../img/logo.png') no-repeat left; 
    margin: 0 auto; 
} 

a.logo { 
    font-size: 33px; 
    margin: 0 auto; 
    display: block; 
    padding-top: 20px; 
}

어떤 아이디어가?

출처

2012-05-03 jasonbradberry

관련 CSS는 무엇인가 시도가 중심이되어야 왼쪽? – Ktash

코드 예제와 함께 jsFiddle을 추가해보십시오. 그것은 우리가 당신을 도울 수 있도록 도와 줄 것입니다. – Cthulhu

너비는 100px로 설정해야합니다. .. 그리고 여백을 설정합니다 : 0 자동; –

하여 정의 할 수 있습니다 : 그것은 정말 H1 안에 있어야 할 필요가 없습니다

<style> 
    .logo{ 
     margin: 0px auto; 
     padding-left: 120px; /* the space between the start of your logo and your text */ 
     padding-top: 30px; /* the vertical space between the top and your text, to center the logo*/ 
     display: block; /* very important since normally anchors are inline */ 
     background: url(path/to/logo.png) top left no-repeat; /* obviously :) */ 
    } 
</style>

결과가 표시되면 위의 .logo 규칙에서 중심을 잘 볼 수없고 단위를 측정하고 너비와 높이를 지정할 수 없습니다.

출처

2012-05-03 15:00:52 lu1s

감사합니다. 앵커 텍스트를 스크린 리더가 사이트의 메인 제목으로 가져 오도록하려면 앵커를 h1 안에 넣습니다. 나는 그와 함께 잘못된 길에있다!? – jasonbradberry

그것은 틀린 것은 아니지만 h1을 앵커 안에 넣으면 더 좋을 것입니다. 보통 로고도 img 요소로 넣었습니다. 즉 '

logo name

'입니다. 더 의미가 있습니다. – lu1s

-1

이것은 작동 할 수 있습니다.

<header style="align:center">

출처

2012-05-03 15:00:16

'text-align'이어야하고, 인라인 스타일은 피해야합니다. – simshaun

바로 .. 나를 정정 해 주셔서 감사합니다. –

배경을 CSS로 배치 할 수 있습니다.

background-position:center;

또한 나는 보통 이런 식으로 할 픽셀 또는 퍼센트

background-position:20px 50px; 
background-position:50% 50%;

출처

2012-05-03 15:00:18 herrmarek

당신은 넣어 가지고 배경 URL을

이

background: url('../img/logo.png') no-repeat center;

출처

2012-05-03 15:34:31

헤더에 로고 배경 이미지와 텍스트를 센터링하는 방법?

답변

logo name

관련 문제