コンテンツ縦型HTML5とオーバーレイ

Question

これを達成するためのいくつかの方法は？私が見たことから、javascriptを使うのに必要ですが、まだ見えません。

コード：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を追加してください。 GermánMéndez@
で

.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; 
}