html - 理解定位 <a> 包裹在 <div> parent 内的元素

Question

我不明白为什么：

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

2. 是什么决定了如何<a>在这个DIV中定位？

3. 我正在创造一个崩溃的时刻，并想办法将<a>'s（带有图标的那些）定位在<a>带有 logo-main 类的 's 下面。使用 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>

标签： htmlcss

Answer 1

通过你的截图，我的理解是，你想要这两个图标在你的 logo 下，现在这些都在 LOGO 上，

这是因为您将 float:right 赋予了这些徽标。

我已经删除了这个。稍微改变结构。

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

1.vertical-align - 在这种情况下不起作用，尽管元素是沿基线设置的并且是内联元素。我试过没有浮动，但事实并非如此。为什么它不起作用，我错过了什么？

vertical-align 将内联元素彼此对齐，它不会将它们定位在它们的容器中。

2. 是什么决定了 <a> 在这个DIV中的位置？

默认情况下，任何元素都会根据其显示的性质（块，内联）在代码中保留它的位置。默认情况下浮动是无。因此，如果您有三个 Anchor 标签并且没有浮动，那么它们将并排（内联），如果您给它们浮动右属性，那么它们将浮动到它们的右侧。

3. 在您的情况下，由于向右浮动，这些不会低于徽标，有 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>