将按钮中的文本居中而不突出悬停状态。为什么这么难？

Question

我希望文本居中而不是修饰。如您所见，我有很多 text decoration:none CSS 不是仍然没有骰子...我很困惑。 div 应该在 link 里面还是外面？

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 假设 link 是 .round-button class 的后代，但实际上恰恰相反。

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 并仅设置 link

来简化整个事情

JSfiddle Demo

将按钮中的文本居中而不突出悬停状态。为什么这么难？

Centering text in a button without underlining the hover state. Why is this so hard?

html

css

button

hover