垂直和水平居中按钮
问题描述：
我需要确保视频下方的“下一步”按钮在黄色背景的块内垂直和水平居中。垂直和水平居中按钮
此外，按钮上的'点击'效果似乎没有达到预期的效果。在这里有一些冲突导致我无法弄清楚什么。
当我只运行“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>
答
要居中按钮给它的宽度和添加margin: 0 auto和display: block;到.next-video-button。
该按钮不会工作，因为a href="#"。将视频网址替换为＃。
+0
非常感谢，@詹姆斯！但是，这不会垂直居中按钮。 – 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