내 텍스트를 원하는 원의 위치에 배치 할 수 없습니다.

Question

이 jsfiddle에서 볼 수 있듯이 http://jsfiddle.net/L9k5c/ 내 "Hello"텍스트가 가운데에 있지 않고 빨간색 원 밖에 위치합니다 (문제 1) . 문제 2는이 "Hello"텍스트가 "onmouse over"서클을 빨간색 원과 더 이상 맞 춥니 다. 어떻게이 2 가지 문제를 해결할 수 있습니까? (문제 1 나는 패딩과 마진 놀 수 있다는 것을 알고 있지만 나는이 +가 문제 2. 많은 감사

<div class="ch-item ch-img-1"><p>hello</p> 
    <div class="ch-info"> 
     <h3>Use what you have</h3> 
     <p>by Angela</p> 
    </div> 
</div> 

CSS 깨끗한 솔루션을 수정하지 않을하지 않을 것이라고 추측 :

.ch-item { 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    position: relative; 
    cursor: default; 
    box-shadow: 
     inset 0 0 0 16px rgba(255,255,255,0.6), 
     0 1px 2px rgba(0,0,0,0.1); 

    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out; 
    -o-transition: all 0.4s ease-in-out; 
    -ms-transition: all 0.4s ease-in-out; 
    transition: all 0.4s ease-in-out; 
} 

.ch-img-1 { 
    background: red; 
} 

.ch-info { 
    position: absolute; 
    background: rgba(63,147,147, 0.8); 
    width: inherit; 
    height: inherit; 
    border-radius: 50%; 
    opacity: 0; 

    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out; 
    -o-transition: all 0.4s ease-in-out; 
    -ms-transition: all 0.4s ease-in-out; 
    transition: all 0.4s ease-in-out; 

    -webkit-transform: scale(0); 
    -moz-transform: scale(0); 
    -o-transform: scale(0); 
    -ms-transform: scale(0); 
    transform: scale(0); 

    -webkit-backface-visibility: hidden; 

} 

.ch-info h3 { 
    color: #fff; 
    font-size: 18px; 
    margin: 0 30px; 
    padding: 45px 0 0 0; 
    height: 100px; 
    font-family: 'Open Sans', Arial, sans-serif; 
} 

.ch-info p { 
    color: #fff; 
    font-style: italic; 
    padding-left:80px; 
    font-size: 12px; 
    border-top: 1px solid rgba(255,255,255,0.5); 
    opacity: 0; 
    -webkit-transition: all 1s ease-in-out 0.4s; 
    -moz-transition: all 1s ease-in-out 0.4s; 
    -o-transition: all 1s ease-in-out 0.4s; 
    -ms-transition: all 1s ease-in-out 0.4s; 
    transition: all 1s ease-in-out 0.4s; 
} 


.ch-item:hover { 
    box-shadow: 
     inset 0 0 0 1px rgba(255,255,255,0.1), 
     0 1px 2px rgba(0,0,0,0.1); 
} 
.ch-item:hover .ch-info { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -o-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    opacity: 1; 
} 

.ch-item:hover .ch-info p { 
    opacity: 1; 
} 

Answer 1

을

당신은 당신이 쉽게 원하는 acheive하는 absolute position 및 transform를 사용할 수 있습니다.

jsFiddle Demo

.ch-item p { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    margin: 0; 
} 

• P.S. - transform을 사용하면 IE 8 이하에서는 작동하지 않지만 이미 다른 장소에서 사용하고 있으므로 괜찮습니다.

Answer 2

HERE IS THE UPDATED FIDDLE

당신이 그것에 position:absolute;을 사용할 수 있도록 래퍼에 position:relative;를 사용으로는 내부 내용이

.ch-item p{ 
position:absolute; 
top:35%; 
left:40%; 
} 

또한 유혹을 whent 여러분 안녕하세요 텍스트에 opacity:0을 배치 할 수있어 .. 귀하의 예에서 당신의 헬로우 텍스트는 호버 후에도 여전히 보이기 때문에

.ch-item:hover p{ 
opacity:0; 
} 

second time modified fiddle