了解定位<a>包裹在<div>父元素中的元素

Question

我不明白为什么：

1. 垂直对齐-在这种情况下不起作用，尽管这些元素是沿基线设置的并且是内联元素。我试过没有浮动，但事实并非如此。为什么不起作用，我想念什么？

2. 如何确定<a>在此 DIV 中的位置？

3. 我正在创建故障时刻，并考虑一种将<a>（带有图标的图标）放置在带有徽标主类的<a>的下方的方法。使用CSS。我已将<a>的显示更改为禁止显示-但这并未将它们显示在下方。

.back-green {
  max-width: 600px;
  margin: auto;
}

.logo-main {
  padding: 10px;
  font-size: 40px;
}

.fa-book,
.fa-compact-disc {
  font-size: 150%;
  padding-top: 5px;
}

.rr {
  float: right;
  padding: 11px;
}

<div class="back-green">
  <a class="logo-main">KSIAZKI&DVD</a>
  <a class="rr"><i class="fas fa-compact-disc shad-logo2 "></i></a>
  <a class="rr"><i class="fas fa-book shad-logo2 va"></i></a>
</div>

Answer 1

根据您的屏幕快照，我了解的是，您想在徽标下使用这两个图标，而现在它们正对着LOGO，

这是因为您为这些徽标赋予了float：权利。

我已删除此内容。稍微改变一下结构。

如果这不是您想要的，请告诉我这些图标的位置。

1.vertical-align-在这种情况下不起作用，尽管这些元素是沿着基线设置的并且是内联元素。香港专业教育学院试图没有浮动，但事实并非如此。为什么不起作用，我想念什么？

垂直对齐将内联元素彼此对齐，不会将它们放置在其容器中。

1. 由什么决定在此 DIV 中的位置？

默认情况下，任何元素都会根据其显示方式（块，内联）在代码中保留的位置。默认情况下，float为none。因此，如果您有三个Anchor标签，但没有浮动，那么它们将并排（内联）， 如果您将它们赋予float-right属性，那么这些属性将向其右侧浮动。

1. 在您的情况下，由于浮动向右，这些不会出现在徽标下方，有2个锚点向右浮动，因此无论您为这些显示分配了什么显示，锚都将始终向右浮动。

.back-green {max-width: 600px; margin: auto;}
.logo-main {padding: 10px; font-size: 40px;}
.fa-book, .fa-compact-disc {font-size: 150%; padding-top: 5px;}
.rr {padding: 11px;}  
.text-center {text-align:center;}

<div class="back-green">
      <div class="text-center"><a class="logo-main">KSIAZKI&DVD</a></div>
      <div class="text-center"><a class="rr"><i class="fas fa-compact-disc shad-logo2 ">Flopy</i></a>
      <a class="rr"><i class="fas fa-book shad-logo2 va">CD</i></a></div>
    </div>