如何在CSS中对齐旋转的文本和图标

mum43rcc 于 2023-02-20 发布在其他

关注(0)|答案(3)|浏览(134)

我正在努力自学CSS，我正在为对齐而挣扎。我想要实现的是有一个固定的侧边栏，里面有一些图标和旋转的文本，所有这些都应该在一列中。
我的代码：
超文本：

<div class="Sidebar">
    <div id="S1" class="SBlock">
        <a href="https://twitter.com"><img src="Twitter_Logo.png" width=10px height=10px></a>
    </div>
    <div id="S2" 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%;
    height: 300px;
}

#S1 {
    position: absolute;
    left: 20%;
    top: 10%;
}

#S2 {
    position: absolute;
    left: 20%;
    top: 20%;
}

#Follow {
    transform: rotate(-90deg);
    font-size: 12px;
    position: absolute;
    left: 20%;
    top: 50%;
    font-family: Montserrat;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}

它会产生以下结果：
Result:
它对图标效果很好，我想这是因为它们的大小是一样的，但是文本更靠右。有什么想法吗？

css

来源：https://stackoverflow.com/questions/75487930/how-to-align-rotated-text-and-icons-in-css

3条答案

按热度按时间

rta7y2nd1#

.Sidebar {
      position: fixed;
      top: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .SBlock {
      margin: 10px 0;
    }
    
    #Follow {
      transform: rotate(-90deg);
      font-size: 12px;
      font-family: Montserrat;
      text-transform: uppercase;
      white-space: nowrap;
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }

试试这个...

赞(0）回复(0）举报 2023-02-20

w1jd8yoj2#

尝试使用writing-mode: sideways-lr而不是transform: rotate(-90deg)来避免额外的空间，并且您不需要position: absolute来使所有项目在侧边栏中对齐。
了解更多关于writing-mode的信息。

.Sidebar {
  position: fixed;
  height: 300px;
  display: flex;
  flex-direction: column;
  background: red;
  align-items: center;
  width: 50px;
}

#Follow {
  font-size: 12px;
  font-family: Montserrat;
  color: blue;
  writing-mode: sideways-lr;
}

<div class="Sidebar">
    <div id="S1" class="SBlock">
        <a href="https://twitter.com"><img src="Twitter_Logo.png" width=10px height=10px></a>
    </div>
    <div id="S2" 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>

赞(0）回复(0）举报 2023-02-20

brc7rcf03#

我建议你使用Flexbox，它对于设计布局也很好，对齐也很容易。这篇文章是一个很好的起点：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

赞(0）回复(0）举报 2023-02-20