使用css在父div中仅垂直对齐一些子div

Question

我有一个父 div 'site-branding'，里面有 3 个子 div。第一个元素是带有徽标的图像，第二个元素是网站标题，最后一个元素是标语。请参阅下面的 HTML：

<div class="site-branding">
    <div class="site-logo"><a href="somelogo.src"></a></div>
    <p class="site-title"><a href="example.com">Title</a></p>
    <p class="site-description">Some text here</p>
</div><!-- .site-branding -->

我希望徽标位于一列中，然后标题和标语在第 2 列中垂直对齐，类似于以下内容：

其中左 = 徽标，右上 = 标题，右下 = 标语。现在需要注意的是：我使用的 wordpress 主题和订阅限制了我可以自定义的程度——我无法查看或编辑源文件。所以我不能编辑 html 并包装 div 和容器等，也不能添加 javascript/jquery。必须使用上述 HTML 配置在 CSS 中完成。

编辑：忽略右下块中的段落 - 网站标语将只是一个标题，由文本“右下”表示。

干杯

Answer 1

应该这样做：

.site-branding > .site-logo {
  display: inline-block;
  width = 50%;
  margin-left: 0px;
}