Question

我正试图将一个很棒的字体图标（播放）放在它的父div中。我可以通过添加适当的px填充来实现这一点，但是当自举网格低于特定大小（移动）时，无法使其保持居中。

我是否需要使用javascript来实现这一目标，还是可以使用css？
有没有办法让字体图标的大小增加/减少它的父div？

动画gif显示播放按钮没有保持中心.- http://www.gfycat.com/RespectfulBruisedFruitbat

小提琴。我尽力重新创造这个。 http://jsfiddle.net/lazycoda/syxpq07b/3/

.fa-play:before {
    content: "\f04b";
}

.fa-play {
    font-size: 26px;
    padding: 36%;
    display: inline-block;
}

Answer 1

查看已编辑的代码，告诉我它是否适合您。

＆＃13;

.primaryContainer {
  height: auto;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
  width: 100%;
}
#box {
  float: left;
  height: 657px;
  margin-left: 7.330357%;
  clear: none;
  width: 82.932351%;
  margin-right: 0%;
}
#box1 {
  float: left;
  clear: none;
  width: 58.843155%;
  background-color: rgb(69, 0, 255);
}
#box2 {
  float: left;
  height: 100.014605%;
  margin-left: 0%;
  margin-top: 0px;
  clear: none;
  background-color: rgb(237, 17, 17);
  min-width: 0%;
  text-align: center;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-play:before {
  content: "\f04b";
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  display: inline-block;
}
.fa-play {
  font-size: 26px;
  display: inline-block;
  width: 200px;
  height: 200px;
}

＆＃13;

<div id="primaryContainer" class="primaryContainer clearfix">
  <div id="box" class="clearfix">
    <div id="box1" class="clearfix">
      <div id="box2" class="clearfix">
        <i class="fa fa-play"></i>
      </div>
    </div>
  </div>
</div>

＆＃13;

View on JSFiddle

响应div中的居中图标

1 个答案: