html - 内容导致div位移

Question

将内容“P”添加到图 block div 时，会导致所述 div 发生位移。每个 div 只能包含 1 个字符。也欢迎任何更好的实现堆叠圆金字塔的方法。

https://jsfiddle.net/usm9t60r/

HTML

<div class="container">
    <div class="row">
        <div class="tile circle">P</div>
        <div class="tile circle"></div>
        <div class="tile circle"></div>
        <div class="tile circle"></div>
        <div class="tile circle"></div>
        <div class="tile circle"></div>
    </div>
    <div class="row">
        <div class="tile circle"></div>
        <div class="tile circle"></div>
        <div class="tile circle"></div>
        <div class="tile circle"></div>
        <div class="tile circle"></div>
    </div>
    <div class="row">
        <div class="tile circle"></div>
        <div class="tile circle"></div>
        <div class="tile circle"></div>
        <div class="tile circle"></div>
    </div>
    <div class="row">
        <div class="tile circle"></div>
        <div class="tile circle"></div>
        <div class="tile circle"></div>
    </div>
    <div class="row">
        <div class="tile circle"></div>
        <div class="tile circle"></div>
    </div>
    <div class="row">
        <div class="tile circle"></div>
    </div>
</div>

CSS

body { 
    font-size: 62.5%; 
}

.container {
    min-width: 32rem;
    max-width: 96rem;
    margin: 0 auto;
}

.row {
    text-align: center;
    margin-bottom: -0.5rem;
}

.circle {
    background: #ccc;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: inline-block;
}

Answer 1

由于您已使用 display:inline-block 为每个 .circle 元素设置样式，并且默认值为 vertical-align是 baseline，向元素添加文本会使其与其他元素的基线对齐。

我成功地将 vertical-align:top 添加到 .circle 类。

body {
  font-size: 62.5%;
}
.container {
  min-width: 32rem;
  max-width: 96rem;
  margin: 0 auto;
}
.row {
  text-align: center;
  margin-bottom: -0.5rem;
}
.circle {
  background: #ccc;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: inline-block;
  vertical-align:top;
}

<div class="container">
  <div class="row">
    <div class="circle">P</div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
  </div>
</div>