Question

我无法在“下一步”按钮中实现点击效果（请参阅代码段1）。

在第一个片段中，它以float: left;值实现，但当我将其插入到我的代码中时，它会破坏按钮的位置。我的下一个＆＃39;按钮应该是第二个片段的方式，即垂直和水平居中。

如何找到解决方法的想法？

Snippet 1

＆＃13;

.next-button {
  transition: all 0.1s;
	-webkit-transition: all 0.1s;
	position: relative;
	padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
	border-radius: 10px;
	font-family: 'Montserrat';
	font-size: 25px;
	color: #ffffff;
	text-decoration: none;
  background-color: #f9c60f;
	border-bottom: 5px solid #888888;
	text-shadow: 1px -2px #888888;
}

.next-button:active {
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}

＆＃13;

<html lang="en">
<head>
  <body>
  <a href="#" class="next-button">NEXT</a>
</body>
</html>

＆＃13;

Snippet 2（我的代码）

＆＃13;

.next-button {
  transition: all 0.1s;
	-webkit-transition: all 0.1s;
	position: relative;
	padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
	border-radius: 10px;
	font-family: 'Montserrat';
	font-size: 25px;
	color: #ffffff;
	text-decoration: none;
  background-color: #f9c60f;
	border-bottom: 5px solid #888888;
	text-shadow: 1px -2px #888888;
}.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;
  line-height:49px;
  

}

.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;
   text-align:center;
}

.next-button:active {
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}

＆＃13;

<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>

＆＃13;

Answer 1

尝试使用

.next-video-button {
   display:inline-block;
   ...
}

而不是

float:left

使用inline-block使元素的行为与文本一样，因此您的文本对齐也适用于这些

＆＃39;点击＆＃39;带有CSS的按钮上的动画效果

1 个答案: