垂直和水平居中按钮

我需要确保视频下方的“下一步”按钮在黄色背景的块内垂直和水平居中。垂直和水平居中按钮

此外，按钮上的'点击'效果似乎没有达到预期的效果。在这里有一些冲突导致我无法弄清楚什么。

当我只运行“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

垂直和水平居中按钮

回答

相关问题