垂直对齐 q 个标签

Question

我目前正在尝试在我的 CSS 中垂直对齐 q 标签，但由于某种原因，引号也没有对齐，从而产生了问题。这是相关代码的相关部分：

q {
   vertical-align: top;
}

Here is an image of the problem. I don't know if this is some sort of complicated issue involving multiple parts interacting, but if so, here is my html and css 个文件。

Answer 1

垂直对齐属性仅适用于：

inline-level and 'table-cell' elements

看到这个link。

尝试

q {
   display: inline;
   vertical-align: top;
}

Answer 2

尝试使用图像左侧的浮动。

img {
  float: left;
}

<p class="quote">
  <img src="http://placehold.it/50x50" alt="Fresh" />
  <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>

垂直对齐 q 个标签

Vertically aligning q tags

html

css

vertical-alignment