Question

这是我的代码：

<div style="text-align: center">
<span style="display: inline-block; font-size: 38px; float: left; cursor: pointer; color: #ccc">❮</span>
<span style="margin-top: 12px; background: #ccc; border: 1px solid #ccc; border-radius: 50%; height: 13px; width: 13px; cursor: pointer; display: inline-block"></span>
<span style="border: 1px solid #ccc; border-radius: 50%; height: 13px; width: 13px; cursor: pointer; display: inline-block"></span>
<span style="border: 1px solid #ccc; border-radius: 50%; height: 13px; width: 13px; cursor: pointer; display: inline-block"></span>
<span style="display: inline-block; font-size: 38px; float: right; cursor: pointer; color: #ccc">❯</span>
</div>

这是在 JSFiddle 上：https://jsfiddle.net/nwvxaofc/

第一个和最后一个跨度左右浮动，而中间的三个跨度水平居中。我希望它们也垂直居中，但如何做到这一点对我来说并不是很明显。

设置 margin-top: 12px 似乎没有任何作用。

如果我为最外面的 div 设置 position: absolute，然后将三个中间跨度用 <div> 和 position: relative 包裹在一个 top: 50% 中，那么浮点数就会变得一团糟。

Answer 1

抛弃所有浮点数和 display:inline-block 并使用 flexbox

div {
  display: flex;
  align-items: center;
}

span:first-of-type {
  margin-right: auto;
}

span:last-of-type {
  margin-left: auto;
}

<div style="text-align: center">
  <span style="font-size: 38px; cursor: pointer; color: #ccc">❮</span>
  <span style=" background: #ccc; border: 1px solid #ccc; border-radius: 50%; height: 13px; width: 13px; cursor: pointer;"></span>
  <span style="border: 1px solid #ccc; border-radius: 50%; height: 13px; width: 13px; cursor: pointer;"></span>
  <span style="border: 1px solid #ccc; border-radius: 50%; height: 13px; width: 13px; cursor: pointer;"></span>
  <span style=" font-size: 38px; cursor: pointer; color: #ccc">❯</span>
</div>

Answer 2

您确实应该将所有这些样式移出到嵌入式样式标记或外部样式表中，并使用直观命名的类。没有人喜欢处理那种乱七八糟的标记，而且你有大量的重复。

Flexbox，未来之路！

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav {
  font-size: 38px;
  cursor: pointer;
  color: #ccc;
}

.nav-dot {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 50%;
  height: 13px;
  width: 13px;
  cursor: pointer;
}

.nav-dot.active {
  background: #ccc;
}

<div class="nav-wrapper">
  <div class="nav prev">❮</div>

  <div class="nav-dots">
    <div class="nav-dot active"></div>
    <div class="nav-dot"></div>
    <div class="nav-dot"></div>
  </div>

  <div class="nav next">❯</div>
</div>

Answer 3

在 flexbox 的位置使用 floats。使用以下代码：

<div style="display: flex; justify-content: space-between; align-items: center;">
  <span style="font-size: 38px;cursor: pointer; color: #ccc">❮</span>
  <div class="dots">
    <span style="margin-top: 12px; background: #ccc; border: 1px solid #ccc; border-radius: 50%; height: 13px; width: 13px; cursor: pointer; display: inline-block"></span>
    <span style="border: 1px solid #ccc; border-radius: 50%; height: 13px; width: 13px; cursor: pointer; display: inline-block"></span>
    <span style="border: 1px solid #ccc; border-radius: 50%; height: 13px; width: 13px; cursor: pointer; display: inline-block"></span>
  </div>
  <span style="font-size: 38px;cursor: pointer; color: #ccc">❯</span>
</div>

代码笔：https://codepen.io/manaskhandelwal1/pen/ExNVWYz?editors=1000

我建议您尽可能不要使用内联样式。并使用单独的文件或使用 style 标记。像这样：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow {
  font-size: 38px;
  cursor: pointer;
  color: #ccc;
}

.dots span {
  border: 1px solid #ccc;
  border-radius: 50%;
  height: 13px;
  width: 13px;
  cursor: pointer;
  display: inline-block;
}

.dots span.active {
  background: #ccc;
}

<div class="container">
  <span class="arrow">❮</span>
  <div class="dots">
    <span class="active"></span>
    <span></span>
    <span></span>
  </div>
  <span class="arrow">❯</span>
</div>

代码笔：https://codepen.io/manaskhandelwal1/pen/gOLamLx?editors=1100

试图垂直居中一些跨度

3 个答案: