Question

所以我有一个非常简单的html代码块，我使用Angular 2将图像和一段链接文本放在一起。问题是图像旁边出现了一段文字，但它出现了在底部而不是顶部。我尝试使用span来修复它，但我似乎无法让它工作。这是我的代码：

＆＃13;

std::cin >> firstName >> lastName

＆＃13;

Answer 1

在HTML中，img元素默认显示为内联，这解释了链接中的文字显示在其旁边的原因。

默认情况下，这些元素沿＆＃34;基线＆＃34;对齐。您可以使用vertical-align CSS属性更改此内容。

在您的情况下，要在图片顶部显示文字，您需要在链接上将vertical-align设置为top。

a.navbar-brand {
  vertical-align: top;
}

＆＃13;

a.navbar-brand {
  vertical-align: top;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="navbar navbar-expand-lg navbar-dark bg-primary">
  <img src="https://lh3.googleusercontent.com/-lzCUfMY44QQ/WPNzcZpufoI/AAAAAAAADXE/CjLE9N_HRpIcXHKZfXDQrkRGD-mib_DzQCEwYBhgL/w140-h140-p/Logomakr_4ALcwz.png" alt="JC" width="65" height="400">
  <a href="../" class="navbar-brand" routerLink="main-screen">
    CubeTheWeb
  </a>
</div>

＆＃13;

详细了解vertical-align。

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="navbar navbar-expand-lg navbar-dark bg-primary">
  <img src="https://lh3.googleusercontent.com/-lzCUfMY44QQ/WPNzcZpufoI/AAAAAAAADXE/CjLE9N_HRpIcXHKZfXDQrkRGD-mib_DzQCEwYBhgL/w140-h140-p/Logomakr_4ALcwz.png" alt="JC" width="65" height="400">
  <a href="../" class="navbar-brand" routerLink="main-screen" style="vertical-align:top;">
    CubeTheWeb
  </a>
</div>

试试这个

HTML衬里问题中的元素

2 个答案: