垂直和水平居中按鈕

我需要確保視頻下方的「下一步」按鈕在黃色背景的塊內垂直和水平居中。垂直和水平居中按鈕

此外，按鈕上的'點擊'效果似乎沒有達到預期的效果。在這裏有一些衝突導致我無法弄清楚什麼。

當我只運行「next-video-button」和「next-video-button：active」CSS規則時，一切正常。

你可以在下面找到我的CSS和HTML。

.course-video { 
 
    background: #f9c70f; 
 
    border: none; 
 
    margin: 0; 
 
    box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset; 
 
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset; 
 
    border-radius: 0; 
 
    -moz-border-radius: 0; 
 
} 
 

 
.next-video-button { 
 
    transition: all 0.1s; 
 
\t -webkit-transition: all 0.1s; 
 
\t padding: 7px 200px; 
 
\t border-radius: 10px; 
 
\t font-family: 'Montserrat'; 
 
\t font-size: 1em; 
 
\t color: #ffffff; 
 
\t text-decoration: none; 
 
    background-color: #888888; 
 
\t border-bottom: 5px solid #5a5a5a; 
 
\t text-shadow: 1px -2px #888888; 
 
    text-align: center; 
 
} 
 

 
.next-video-button:active { 
 
\t transform: translate(0px,5px); 
 
    -webkit-transform: translate(0px,5px); 
 
\t border-bottom: 1px solid; 
 
} 
 

 
.video-title { 
 
    font-family: montserrat; 
 
    font-size: 1.5em; 
 
    color: #000000; 
 
    padding: 0.5em; 
 
    box-sizing: border-box; 
 
    width: 854px; 
 
    text-shadow: 0px 2px 4px rgba(0,0,0,0.3); 
 
} 
 

 
.video-descr { 
 
    width: 854px; 
 
    box-sizing: border-box; 
 
    height: 50px; 
 
    margin-top: -5px; 
 
}

<div class="course-video video-title">Hello</div> 
 
<iframe src="https://player.vimeo.com/video/154094373" width="854" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
<div class="course-video video-descr"><a href="#" class="next-video-button">NEXT</a></div>

來源

2016-11-30 Ira

添加文本對齊：中心到.course-video，並使用line-height在.next-video-button上播放以獲得所需的位置：https：//jsfiddle.net/smhob5pk/1/ '點擊事件'有什麼問題？ – sinisake

@nevermind非常感謝！但是，它會將第一個塊的內容（包含單詞「Hello」）作爲中心，這實際上並不是我想要的。但非常感謝！ – Ira

嗯，是的，然後添加文本對齊.video-descr：https://jsfiddle.net/smhob5pk/2/ – sinisake

要居中按鈕給它的寬度和添加margin: 0 auto和display: block;到.next-video-button。

該按鈕不會工作，因爲a href="#"。將視頻網址替換爲＃。

來源

2016-11-30 21:51:51 James

非常感謝，@詹姆斯！但是，這不會垂直居中按鈕。 – Ira

垂直和水平居中按鈕

回答

相關問題