Question

我的代码到目前为止一直有效，我不知道发生了什么。我正在尝试使每个标题彼此垂直对齐。我真的很感谢有人帮我这个忙！

<div style="width: 32%; display: inline-block; vertical-align:top; text-align:;">
  <h3>Gents</h3>
  <p>
    <a href="barberp6.html">
      <span style="color:rgb(245, 166, 208);">The</span>
      <span style="color: rgb(167, 238, 220);">Baber</span>
      <span style="color:rgb(188, 114, 223);">Shop</span>
    </a>
  </p>
</div>

Answer 1

您可以通过flexbox实现假设vertical-align是您要上的课

.vertical-align{ display:flex; align-items:center; }

Answer 2

我建议您在每个单个span元素之间放置一个<br>，如下所示：

<div style="width: 32%; display: inline-block; vertical-align:top; text-align:;">
  <h3>Gents</h3>
  <p>
    <a href="barberp6.html">
      <span style="color:rgb(245, 166, 208);">The</span>
      <br>
      <span style="color: rgb(167, 238, 220);">Baber</span>
      <br>
      <span style="color:rgb(188, 114, 223);">Shop</span>
    </a>
  </p>
</div>

这将在每个单词之间创建一个空格。我找不到其他方法...

我的用于垂直对齐每个标题的HTML无法正常工作

2 个答案: