이미지를 고정 너비 div에 가운데 맞춤 텍스트

이미지와 일부 텍스트가 포함 된 <div>이 있습니다. 왼쪽 모서리에 이미지가 있고 문자는 <div>의 가운데에 있어야합니다. 그러나 이미지의 너비 때문에 텍스트가 오른쪽에서 약간 벗어난 중심에서 벗어납니다. 어떻게 수정합니까 ?? position:relative에이미지를 고정 너비 div에 가운데 맞춤 텍스트

<header> 
<img id="searchBoxProp" src="/resources/images/searchBoxProp.png"> 
<div class="title">RECIPE SEARCH</div> 
</header> 


header #searchBoxProp { margin: -16px 0 0 2px; width: 43px; float: left; } 
header .title { text-align: center; margin-left: 0 auto; }

출처

2011-12-20 amit

설정 header 및 position:absolute에 #searchBoxProp. 절대 위치 지정은 요소를 레이아웃 밖으로 가져 오므로 텍스트 위치에 영향을 미치지 않습니다. 헤더의 상대 위치 지정은 #searchBoxProp이 브라우저 창 대신 header에 상대적으로 배치되도록합니다.

header { 
    position:relative; 
} 
#searchBoxProp { 
    position:absolute; 
    left:0px; /* set to your needs */ 
    top:0px; /* set to your needs */ 
}

출처

2011-12-20 13:26:47 ptriek

당신이 왼쪽 정의합니다 해달라고 귀하의 텍스트를 중심으로, 부모 컨테이너가 변경되면 자동으로 변경됩니다 다음도 100 % 폭을 설정하는 것이 좋습니다. –

@DominicGreen OP는 이미지가 '왼쪽 구석'에 있어야한다고 언급 했으므로 전제가 아닌 왼쪽 상단에 원하는 아이콘이 있다고 가정합니다. – ptriek

당신은 <div class="title">의 배경으로 이미지를 설정하고 적절하게 텍스트를 정렬하기 위해 text-align:center을 설정할 수 있습니다.

html로는 될 수 :

<header> 
    <div class="title">RECIPE SEARCH</div> 
</header>

그리고 CSS : 당신은 또한 (이미지와 같은) 고정 된 높이를 설정해야합니다

div.title { 
    background-image:url('/resources/images/searchBoxProp.png'); 
    background-repeat:no-repeat; 
    text-align:center; 
}

, 그리고 마지막으로 설정 폭을 소원.

출처

2011-12-20 13:27:27 Simone

+1 이미지는 머리글의 왼쪽 상단에 있어야하기 때문에 머리글에 배경을 설정하고 no-repeat + position을 추가 했으므로 +1을해야합니다. – ptriek

그래, 나 그것을 잊어 버렸습니다. 감사합니다 :) – Simone

어떤 사람이 논쟁보다는 배경을 사용하기로 결정했을 때 항상 행복합니다 :) –

모범 사례는 배경 이미지를 사용하는 것입니다. 그러나 그렇지 않으면 위와 같은 위치 절대 값을 사용할 수 있습니다.

header{position:relative;} 
header .title { position:absolute; width:100%; display:block; text-align:center; }

출처

2011-12-20 13:31:53

예가 여기에 있습니다. http://jsfiddle.net/CgY2u/1/ –

이미지를 고정 너비 div에 가운데 맞춤 텍스트

답변

관련 문제