在按钮中居中文本而不强调悬停状态。为什么这么难？

Question

我希望文本居中而不是装饰。正如你所看到的，我有很多text decoration:none CSS，但仍然没有骰子......我很困惑。 div 应该在链接内部还是外部？

HTML -

 <a href=""
       data-toggle="modal"
       data-target="#videoModal"
       data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">
      <div class="round-button">
           <i class="fa fa-play"></i>  Watch Trailer
      </div>
    </a>

CSS -

.round-button {
  width:20%;
  width: 15em;
  height: 3em;
  margin-top: 1em;
  moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  background: #f49131;
  vertical-align: middle;
  text-align:center;
  color:white;
  font-size: 1.4em;
  text-decoration:none;
  cursor:pointer;

}

.round-button:hover {
  background:#f46800;
  text-decoration:none;
}
.round-button a {
  display:block;
  vertical-align: middle;
  text-decoration:none;
}

.round-button a:hover {
  text-decoration: none;
}

常规状态 -

光标状态 -

Answer 1

您的选择器不正确。

.round-button a 假定链接是 .round-button 类的后代，但实际上反过来也是如此。

a .round-button {
  width: 20%;
  width: 15em;
  height: 3em;
  line-height: 3em;
  margin-top: 1em;
  moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  background: #f49131;
  vertical-align: middle;
  text-align: center;
  color: white;
  font-size: 1.4em;
  text-decoration: none;
  cursor: pointer;
}
a {
  text-decoration: none;
}

<a href="#" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">
  <div class="round-button">
    <i class="fa fa-play"></i> Watch Trailer
  </div>
</a>

事实上，您可以通过不使用 div 并仅设置链接样式来简化整个事情

JSfiddle Demo