콘텐츠 세로 HTML5 및 오버레이

Question

이것을 달성하는 방법은 무엇입니까? 내가 본 것에서는 자바 스크립트를 사용하는 데 필요한 것이지만 여전히 어떻게 보이지 않습니다.

코드 : http://codepen.io/gcpmendez/pen/mEmzPa

HTML :

<div class="languages-list" style=" padding-top: 10px; padding-bottom: 10px;"> 
     <span >L<sub>1</sub> </span> 
     <p class="form-control"> </p> 
     <button id="alphabet-language-1">Σ<sub>1</sub> </button> 
    </div>` 

CSS :

.languages-list p { 
width:300px; 
    height: 300px; 
    border-radius:100%; 
    border: 1px solid #000; 
    position:absolute; overflow:hidden; 
    float:left; top:100px; left:100px; 

    text-align: center; 
} 

.languages-list span { 
    position:absolute; 
    float:left; top:80px; left:245px; 
} 
.languages-list button { 
width:70px; 
    height: 70px; 
    border-radius:100%; 
    border: 1px solid #000; 
    position:absolute; overflow:hidden; 
     float:left; top:110px; left:320px; 
} 

Answer 1

나는 이것이 당신이 원하는 생각 https://jsfiddle.net/7ku7qvfx/13/

text-align: center을 제거한 다음 padding-left을 대신 입력하십시오.
와

.languages-list p { 
    font-size: 25px; 
    width: 300px; 
    height: 300px; 
    border-radius: 100%; 
    border: 1px solid #000; 
    position: absolute; 
    overflow: hidden; 
    float: left; 
    top: 100px; 
    left: 100px; 
    padding-left: 140px; 
    //text-align: center; 
}