텍스트가 가운데에 맞춰진 이미지로 인라인으로 표시됩니다.

-2

이 항목에 약간의 어려움이 있습니다. 나는 HTML을 배웠지 만 나는 그것에 매달려있다.텍스트가 가운데에 맞춰진 이미지로 인라인으로 표시됩니다.

내 웹 사이트에는 사이트 상단에 로고가 있습니다. 이미지 위치를 이동하지 않고 이미지로 웹 사이트의 왼쪽에 텍스트를 추가하고 싶습니다.

   LOGO 
      LOGO 
      LOGO 
Text here LOGO 
|------------------------------| (Page width)

텍스트는 페이지의 나머지 부분을 망칠 수 있으므로 로고 줄 위나 아래에있을 수 없습니다.

편집 : 상황에서 혼란 스럽기 때문에 "지금 가지고있는 것"을 삭제하기로 결정했습니다.

그래서이 장면을 어떻게 다루겠습니까?

출처

2014-11-04 mrg95

jsfiddle하십시오! –

죄송 합니다만, 나는 그것에 익숙하지 않습니다. 사람들이 물건을 다시 작성할 때 어떤 사람들은 마음에 들지 않는다는 것을 알고 있기 때문에 나는 코드의 일부만 잘라 냈습니다. – mrg95

죄송하지만 원하는 것은 무엇입니까? :) http://jsfiddle.net/ex65xetj/

<div class="wide"> 
    <img src="path/to/image"></img> 
    <span>Text here</span> 
</div>

단순히 포장지에 로고 섹션을 포장하십시오.

상대 위치로 설정합니다 (따라서 어린이 절대 위치는 페이지가 아닌이 요소와 관련이 있습니다).

그런 다음 텍스트의 절대 위치를 지정하십시오.

텍스트의 왼쪽 및 아래쪽 위치 값을 0으로 설정하여 왼쪽 하단에 붙습니다.

출처

2014-11-04 12:08:59

jsfiddle이 보여주는 것이 내가 찾고있는 것입니다. 불행히도 HTML/CSS에 대한 경험 부족 (지난 며칠간)은 내가 지금 가지고있는 것에 그것을 구현할 때 약간의 손실을 남기고 있습니다. 내 CSS 파일이 다른 구문을 사용하는 것으로 보입니까? XenForo 구문을 사용합니다. – mrg95

코드를 기반으로 몇 가지 시도해 보겠습니다. – mrg95

XenForo? 구문? 웹에서 찾을 수 없습니다. –

<div class="logo-div"> 
    <img src="" alt="logo"/> 
    <div class="text-block">Your text goes here</div> 
</div>

CSS

.logo-div{ 
    border:1px solid #ccc; 
    padding:40px; 
    text-align:center; 
    background-color:#f6f6f6; 
} 
.text-block{ 
    top:70px; 
    left:190px; 
    position:absolute; 
}

작업 바이올린 : http://jsfiddle.net/raghuchandrasorab/jy9n4hp2/

출처

2014-11-04 12:10:59

그 텍스트는 그 라인 아래에 있기 때문에 찾고있는 것이 아닙니다. 심벌 마크. – mrg95

사람들은 그 수준까지 먹이를 줄 수 없습니다. CSS의 왼쪽과 위쪽 값을 변경하여 원하는 방식으로 정렬하고 html로 원하는 이미지를 추가하십시오! –

이것은 스푼 피드와는 아무런 관련이 없습니다. 당신이 보여준 것은 내가 어떻게해야하는지 이미 알고있는 것입니다.텍스트가 로고가 아닌 INLINE으로되어 있어야합니다. – mrg95

텍스트가 가운데에 맞춰진 이미지로 인라인으로 표시됩니다.

답변

관련 문제