在我自己的非WP站点中，我使用bootstrap处理列。这是我第一次在没有它的情况下尝试CSS定位。我需要对齐我的网站标题元素，如下所示，文本元素在页面容器的边缘对齐：

这是由WordPress生成的HTML：

<代码><；DIV类="；站点品牌"；>；<；a href="；https：//misc-ramblings.com/"类="；自定义徽标链接"；REL="；HOME"；Aria-current="；页面"；>；<；IMG width="；240"；高度="；110"；SRC="；https：//misc-ramblings.com/wp-content/uploads/2021/09/cropped-misc_ramblings_logo_16x9.gif"类="；自定义徽标"；alt="；杂谈"；/>；<；/a>；<；H1类="；站点标题"；>；<；a href="；https：//misc-ramblings.com/" rel="；主页"；>；杂谈<；/a>；<；/H1>；<；p类="；场地描述"；>；半随机沉思，令人信服的分析&；amp；对上帝、人类、流行文化的精辟评论政治<；/p>；<；/DIV>；

下面是我之前尝试回答这个问题的回答者提供的CSS.仅供参考，这些是我的自定义CSS中这些HTML元素的唯一定位规则。

<div class="site-branding">
    <a href="https://misc-ramblings.com/" class="custom-logo-link" rel="home" aria-current="page">
        <img width="240" height="110" src="https://misc-ramblings.com/wp-content/uploads/2021/09/cropped-misc_ramblings_logo_16x9.gif" class="custom-logo" alt="Miscellaneous Ramblings"/>
    </a>
    <h1 class="site-title">
        <a href="https://misc-ramblings.com/" rel="home">Miscellaneous Ramblings</a>
    </h1>
    <p class="site-description">Semi-random musings, cogent analysis &amp; pithy commentary on God, mankind,  pop culture &amp; politics</p>
</div>

这就是我得到的：

因此，我的问题的垂直定位部分已经解决，徽标和文本元素现在彼此垂直对齐，但由于某种原因，文本元素仍然没有与页面容器的右侧对齐（使用站点横幅图像作为该边缘位置的视觉参考）。

如何纠正这一点？

顺晟科技：

只需添加.site-branding { display: grid; grid-template-columns: auto 1fr; justify-content: space-between; align-items: center; text-align: right; } .custom-logo-link { grid-row: 1/3; } .site-title, .site-description { align-self: end; margin: 0; } .site-description { grid-column: 2; } .custom-logo { width: 300px; max-width: none; } 到width: 100%;样式。它将使您的标题与页面容器一样大。