CSS 静态播放按钮

Question

我正在尝试制作一个播放按钮。我运行在尝试让播放三角形位于圆的中心时遇到了一些麻烦。我一直在尝试解决这个问题，但无济于事，所以我想我会问问你们！

如果您对如何执行此操作有任何其他建议，我很想知道！

谢谢大家！

HTML:

    <a href="#">
      Learn more
      <br>
      <i class="fa fa-angle-down"></i>
    </a>

CSS:

#play-btn{
  height: 100px;
  width: 100px;
  margin: 0 auto;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #FFF;
  border-radius: 50%;
  opacity: .7;
}

#play-btn:hover{
  opacity: 1;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.fa-play{
  position: relative;
  top: 50%;
  color: #FFF;
  opacity: .7;
  font-size: 50px;
  transform: translateY(-50%);
}

.fa-play:hover{
  color: #FFF;
  opacity: 1;
}

http://codepen.io/anon/pen/grpzmr

Answer 1

只需在 #play-btn 中应用 text-align:center; 使其内容居中：

#play-btn {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #FFF;
  border-radius: 50%;
  opacity: .7;
  text-align: center;
}

你的updated pen.

Answer 2

其实你只需要对你的 CSS 进行小的修改。

只需为 class #play-btn 添加以下 CSS，您的问题就会得到解决。

text-align:center;
padding-left: 10px;

或在更新后的代码下方查看：

HTML :

<a href="#">
      Learn more
      <br>
      <i class="fa fa-angle-down"></i>
    </a>

CSS :

#play-btn{
  height: 100px;
  width: 100px;
  margin: 0 auto;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #FFF;
  border-radius: 50%;
  opacity: .7;
  text-align:center;
  padding-left: 10px;
}

#play-btn:hover{
  opacity: 1;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.fa-play{
  position: relative;
  top: 50%;
  color: #FFF;
  opacity: .7;
  font-size: 50px;
  transform: translateY(-50%);
}

.fa-play:hover{
  color: #FFF;
  opacity: 1;
}

只需复制粘贴并查看，希望对您有所帮助。

CSS 静态播放按钮

CSS Static Play Button

html

css

button

playback