垂直对齐 q 标签答案

【问题标题】：Vertically aligning q tags [closed]垂直对齐 q 标签
【发布时间】：2016-10-03 04:04:32
【问题描述】：

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

q {
   vertical-align: top;
}

Here is an image 的问题。我不知道这是否是涉及多个部分交互的某种复杂问题，但如果是这样，这是我的html 和css 文件。

【问题讨论】：

我不知道这是否被否决了，因为这个页面是一个股票网络编程作业，但澄清一下，使用在线资源，如 Stack Overflow，在我上学的地方都是允许和接受的.
我认为投反对票是因为您应该粘贴最小的 HTML 和 CSS 以重新创建您的问题。但是您的图像显示的不仅仅是 q 标签。
是的 - 查看minimal reproducible example。 Stack Overflow 在问题质量方面设定了相当高的标准 - 让潜在的回答者尽可能轻松，您可能会得到更好的反应。

标签： html css vertical-alignment

【解决方案1】：

vertical-align 属性仅适用于：

内联级和“表格单元”元素

看到这个link。

试试

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

【讨论】：

那么，q 里面的东西是内联的，但是它创建的引号不是内联的？如果是这样，这就解释了为什么它不起作用。不幸的是，显示内联的东西并没有解决问题。
你已经有了代码，你能创建一个 jsfiddle 或代码笔示例吗？这样我就可以轻松地 fork 它并帮助您解决问题
好的，我创建了一个副本here。它没有图像，但它们并不重要，因为 p 标签内的引号标签是有问题的。
好的，你想要的是引号对齐吗？
是的。我有一个解决问题的其他答案的解决方案，但我想知道如何在未来正确地做到这一点。

【解决方案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 标签。