텍스트 반응이는 김 내 첫 번째 질문

입니다 ... 내가 같이가 someting을 할 필요가 :텍스트 반응이는 김 내 첫 번째 질문

하지만 난 나를 위해 많은 아무것도 작업을 검색, 내가 이런 일을했다 내 HTML과 CSS에서 작동하지만

.thumbnail { 
 
    position: relative; 
 
    margin-bottom: 0; 
 
    border: 0; 
 
    border-color: transparent; 
 
} 
 

 
.caption { 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 0; 
 
    width: 100%; 
 
}

<div id="box-search"> 
 
     <div class="thumbnail text-center"> 
 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt=""> 
 
      <div class="caption"> 
 
       <p>[email protected]</p> 
 
       <p>+56983874071 | +56228231294</p> 
 
       <p>El Aguilucho 3174, Providencia, Región Metropolitana</p> 
 
      </div> 
 
     </div> 
 
    </div>

전 채널에서 응답 모드를 사용할 때 로마는, 텍스트

이미지 떠나 (내 영어에 대한 미안, 난 스페인어)

출처

2017-04-10 Javier Gonzalez

img { 
 
    display: block; 
 
} 
 

 
.thumbnail { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.caption { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
    color: white; 
 
    font-weight: bold; 
 
}

<div id="box-search"> 
 
     <div class="thumbnail"> 
 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt=""> 
 
      <div class="caption"> 
 
       <p>[email protected]</p> 
 
       <p>+56983874071 | +56228231294</p> 
 
       <p>El Aguilucho 3174, Providencia, Región Metropolitana</p> 
 
      </div> 
 
     </div> 
 
    </div>

출처

2017-04-10 21:58:37 hungerstar

은'p'의 위쪽 여백이 오프 약간의 상하 방향의 중심합니다 .. . – LGSon

사실, img이 여전히'display : inline; '을 사용하고 있고, 디 센더 높이가 그 불일치를 만들어 낸다고 생각합니다. 'p'는 똑같은 상단과 하단 마진을 가지고 있기 때문에 수직으로 적절히 중심을 맞춰야합니다. 그것 위에서 멋진 붙잡음은 조금 벗어나있다! – hungerstar

예, 그게 내 잘못이었습니다. – LGSon

텍스트 반응이는 김 내 첫 번째 질문

답변

관련 문제