CSS靜態播放按鈕

Question

我正在嘗試製作播放按鈕。我已經遇到了一些麻煩，試圖讓三角形在圈內居中。我一直試圖弄清楚這一點沒有用，所以我想我會問你們和加爾斯！

如果您有任何其他建議如何做到這一點，我很想知道！

謝謝你們！

HTML：

<a href="#"> 
     Learn more 
     <br> 
     <i class="fa fa-angle-down"></i> 
    </a> 

CSS：

#play-btn{ 
    height: 100px; 
    width: 100px; 
    margin: 0 auto; 
    position: relative; 
    display: inline-block; 
    box-sizing: border-box; 
    border: 3px solid #FFF; 
    border-radius: 50%; 
    opacity: .7; 
} 

#play-btn:hover{ 
    opacity: 1; 
    -webkit-transition: all 500ms ease; 
    -moz-transition: all 500ms ease; 
    -ms-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    transition: all 500ms ease; 
} 

.fa-play{ 
    position: relative; 
    top: 50%; 
    color: #FFF; 
    opacity: .7; 
    font-size: 50px; 
    transform: translateY(-50%); 
} 

.fa-play:hover{ 
    color: #FFF; 
    opacity: 1; 
} 

http://codepen.io/anon/pen/grpzmr

Answer 1

其實你只需要對你的CSS做一些小修改。

只需爲類＃play-btn添加以下CSS，即可解決問題。

text-align:center; 
padding-left: 10px; 

或者檢查出來下面更新代碼：

HTML：

<a href="#"> 
     Learn more 
     <br> 
     <i class="fa fa-angle-down"></i> 
    </a> 

CSS：

#play-btn{ 
    height: 100px; 
    width: 100px; 
    margin: 0 auto; 
    position: relative; 
    display: inline-block; 
    box-sizing: border-box; 
    border: 3px solid #FFF; 
    border-radius: 50%; 
    opacity: .7; 
    text-align:center; 
    padding-left: 10px; 
} 

#play-btn:hover{ 
    opacity: 1; 
    -webkit-transition: all 500ms ease; 
    -moz-transition: all 500ms ease; 
    -ms-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    transition: all 500ms ease; 
} 

.fa-play{ 
    position: relative; 
    top: 50%; 
    color: #FFF; 
    opacity: .7; 
    font-size: 50px; 
    transform: translateY(-50%); 
} 

.fa-play:hover{ 
    color: #FFF; 
    opacity: 1; 
} 

只需複製，粘貼，並檢查了我希望這將有助於您。

Answer 2

只是應用text-align:center;在#play-btn到中心的內容：

#play-btn { 
    height: 100px; 
    width: 100px; 
    margin: 0 auto; 
    position: relative; 
    display: inline-block; 
    box-sizing: border-box; 
    border: 3px solid #FFF; 
    border-radius: 50%; 
    opacity: .7; 
    text-align: center; 
} 

您的updated pen。