中心浮动元素

Question

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如何在圆圈内设置数字中心？我不能做填充或保证金，因为它会有响应。

Answer 1

您可以尝试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>

Answer 2

最佳解决方案是，您可以使用display:table-cell和vertical-align:middle。它也是响应。

有一件事是，如果你改变高度，那么它也将保持垂直中间。此外，您可以使用line-height，但在增加圆圈高度时会发生变化。

使用如下：

＆＃13;

＆＃13;

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

.key > span{
  display:table-cell;
  vertical-align:middle;
  }

＆＃13;

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

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

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要在顶部填充

.key {
  width: 40px;
padding-top:10px;
  height: 30px;
  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>

Answer 4

解决方案1：line-height

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

解决方案2：flex

＆＃13;

＆＃13;

.key {
  width: 40px;
  height: 40px;
  background: red;
  float: left;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.clearFloat {
  clear: both;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;