将微调器置于div

Question

＆＃13;

＆＃13;

.templateCard {
  width: 136px;
  height: 260px;
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 10px;
}
#spinner {
  margin: auto;
  width: 20px;
  height: 20px;
  border: solid black;
}

＆＃13;

<div id="card01" class="thumbnail templateCard">
  <div id="spinner" class="ms-Spinner"></div>
  <img src="/Content/img/template01.png" alt="...">
  <div class="caption">
    <h3>Rapport 1</h3>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我有这段代码。我希望spinner-div在card01 div中水平和垂直居中。我只能设法水平居中。似乎问题是div内的另外两个card01-div，因为我可以将微调器放在另一个空div中（但不在此div容器中另外两个div } S）。

所以我希望微调器覆盖card01中的其他内容。

编辑：而且，当微调器出现时，card01-div不得调整大小！

Answer 1

使用position:relative/absolute，

以下是两个例子，

• 与完整卡片对齐
• 仅对齐图片

＆＃13;

＆＃13;

.templateCard {
  border: 1px dashed red;
  /* demo */
  width: 136px;
  display: inline-block;
  vertical-align: top;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 10px;
  position: relative;
}
#spinner {
  margin: auto;
  width: 20px;
  height: 20px;
  border: solid black;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}
#card02.templateCard {
  height: 260px
}

＆＃13;

<div id="card01" class="thumbnail templateCard">
  <div id="spinner" class="ms-Spinner"></div>
  <img src="//placehold.it/136" alt="...">
  <div class="caption">
    <h3>Rapport 1</h3>
  </div>
</div>

<div id="card02" class="thumbnail templateCard">
  <div id="spinner" class="ms-Spinner"></div>
  <img src="//placehold.it/136x260" alt="...">
  <div class="caption">
    <h3>Rapport 1</h3>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用css autolayout

这里是codePen

flexbox

.templateCard {
  width: 136px;
  height: 260px;
  display: inline-flex;
  border: 1px solid #000;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 10px;
}
#spinner {
  margin: auto;
  width: 20px;
  height: 20px;
  border: solid black;
  align-self: center;
}