中心浮动元素

debugcn 发表于 Dev

杰米·安德森（Jamie Anderson）

.key {
  width: 40px;
  height: 40px;
  background: red;
  float: left;
  border-radius: 50%;
  text-align: center;
}
.clearFloat {
  clear: both;
}

<div class="keyWrap">
  <div class="key"><span>1</span>
  </div>
  <div class="key">2</div>
  <div class="key">3</div>

  <div class="clearFloat"></div>

  <div class="key">4</div>
  <div class="key">5</div>
  <div class="key">6</div>
  <div class="clearFloat"></div>

  <div class="key">0</div>
</div>

如何使数字中心在圆内居中？我无法进行填充或边距处理，因为它会快速响应。

阿克沙伊

你可以试试 line-height

.key {
  line-height:40px;
  width: 40px;
  height: 40px;
  background: red;
  float: left;
  border-radius: 50%;
  text-align: center;
}
.clearFloat {
  clear: both;
}

<div class="keyWrap">
  <div class="key"><span>1</span>
  </div>
  <div class="key">2</div>
  <div class="key">3</div>

  <div class="clearFloat"></div>

  <div class="key">4</div>
  <div class="key">5</div>
  <div class="key">6</div>
  <div class="clearFloat"></div>

  <div class="key">0</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。