Question

我有一个:before元素，我想根据它附加的元素的高度垂直对齐。我正在<blockquote>使用它，但我相信我的问题会更普遍适用。

我有以下jsfiddle来说明：https://jsfiddle.net/06mf93kx/

基本上我希望:before元素与段落的顶部对齐（因为它在小提琴中;第二个引用在那里是正确的。）但是，如果段落只有一行，然后我希望段落相对于:before元素垂直居中，如下所示：

+-------+
|       |
|       |  Pithy quote.
|       |
+-------+

有没有办法在CSS中执行此操作而不使用JS来测量段落的大小并调整样式？

我已尝试过的一些事情：我在line-height: 30px上尝试<blockquote>，这会产生单行情况的预期效果，但当然将多行情况中的行划开。我在min-height: 30px上使用<blockquote> top: 50%尝试了<p>，但这似乎没有改变任何内容。

Answer 1

由于引入了灵活的布局，因此非常简单。我已经复制了您的jsFiddle HTML / CSS并将flex更改为align-items，并且我已使用blockquote { margin-left: 20%; } blockquote:first-child { display: flex; align-items: center; } blockquote:before { content: url('http://placehold.it/30x30'); width: 30px; height: 30px; margin-right: 1rem; float: left; margin-left: -15%; }将内部元素垂直居中。

＆＃13;

<blockquote>
  <p>
    Pithy quote.
  </p>
</blockquote>
<hr/>
<blockquote>
  <p>
    This is a long quote; there's a lady who's sure all that glitters is gold and she's buying a stairway to heaven. When she gets there she knows, if the stores are all closed, with a word she can get what she came for.
  </p>
</blockquote>

＆＃13;

import ply.lex as lex

tokens = [ 'NAME','NUMBER','PLUS','MINUS','TIMES', 'DIVIDE', 'EQUALS' ]
t_ignore =  '\t'
t_PLUS = r'\+'
t_MINUS = r'-'
t_TIMES = r'\*'
t_DIVIDE = r'/'
t_EQUALS = r'='
t_NAME = r'[a-zA-Z_][a-zA-Z0-9_]*'
def t_NUMBER(t):
    r'\d+'
    t.value = int(t.value)
    return t

lex.lex() # Build the lexer

＆＃13;

CSSTricks has an excellent guide成为创建灵活布局的专家。

Answer 2

最后，Matías'CSS tricks链接指向了正确的方向。

以下是我希望它做的事：https://jsfiddle.net/8utbj2o7/

而不是align-items: center，我使用了align-self：

blockquote:before {
    align-self: flex-start;
}

blockquote p {
    align-self: center;
}

如果<p>元素的高度低于:before元素，则a >> b元素本身仅。

是否可以根据元素的大小不同地垂直对齐a：

2 个答案: