如何在CSS中实现固定侧边栏内旋转文本与图标对齐？

你的问题出在旋转文本时的变换原点和定位逻辑上：默认transform: rotate(-90deg)是以元素中心为原点旋转，加上绝对定位的left:20%是基于元素左上角定位，旋转后自然会偏离图标对齐线。

下面给出两种修复方案：

方案1：调整旋转原点+位置补偿（基于你现有代码修改） #

修改#Follow的CSS，把变换原点设为元素的右上角，再通过translateX补偿位置，让文本和图标左对齐：

#Follow {
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: top right; /* 把旋转原点设为右上角 */
    font-size: 12px;
    position: absolute;
    left: 20%;
    top: 50%;
    font-family: Montserrat;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}

方案2：用Flex布局重构（更简洁易维护） #

放弃逐个绝对定位，用Flex垂直排列侧边栏内容，再单独处理旋转文本的位置，这样布局更稳定：

修改后的HTML： #

<div class="Sidebar">
    <div class="SBlock">
        <a href="https://twitter.com"><img src="Twitter_Logo.png" width=10px height=10px></a>
    </div>
    <div class="SBlock">
        <a href="https://linkedin.com"><img src="Linkedin_Logo.png" width=10px height=10px></a>
    </div>
    <div id="Follow" class="SBlock">
        Follow Us
    </div>
</div>

修改后的CSS： #

.Sidebar {
    position: fixed;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    display: flex;
    flex-direction: column;
    gap: 15px; /* 图标和文本之间的间距 */
    padding-left: 20%; /* 替代原来的left定位 */
}

#Follow {
    transform: rotate(-90deg) translateX(-50%);
    transform-origin: center left; /* 以左侧中心为原点旋转 */
    font-size: 12px;
    font-family: Montserrat;
    text-transform: uppercase;
    white-space: nowrap;
    margin-top: 30px; /* 调整和图标的垂直间距 */
}

两种方案都能让旋转文本和图标保持一列对齐，方案2的Flex布局更适合后续扩展内容。

内容的提问来源于stack exchange，提问作者Anfield