垂直和水平居中按钮

时间:2016-11-30 21:39:36

标签: html css alignment

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

此外,按钮上的“点击”效果似乎无法正常工作。这里有一些导致冲突的事情,我无法弄清楚是什么。

当我只运行“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;
	-webkit-transition: all 0.1s;
	padding: 7px 200px;
	border-radius: 10px;
	font-family: 'Montserrat';
	font-size: 1em;
	color: #ffffff;
	text-decoration: none;
  background-color: #888888;
	border-bottom: 5px solid #5a5a5a;
	text-shadow: 1px -2px #888888;
  text-align: center;
}

.next-video-button:active {
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	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>

1 个答案:

答案 0 :(得分:0)

要使按钮居中,请为其指定宽度,并将margin: 0 autodisplay: block;添加到.next-video-button

由于a href="#",该按钮无法正常工作。将#替换为视频网址。