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

huangapple
go评论92阅读模式
英文:

How to align rotated text and icons in CSS

问题

这是您提供的CSS和HTML代码，其中您遇到了对齐问题。您的目标是创建一个固定的侧边栏，其中包含一些图标和旋转的文本，它们都应该在一列中。以下是您的问题的翻译部分：

  1. .Sidebar {
  2.     position: fixed;
  3.     top: 50%;
  4.     height: 300px;
  5. }
  7. #S1 {
  8.     position: absolute;
  9.     left: 20%;
  10.     top: 10%;
  11. }
  13. #S2 {
  14.     position: absolute;
  15.     left: 20%;
  16.     top: 20%;
  17. }
  19. #Follow {
  20.     transform: rotate(-90deg);
  21.     font-size: 12px;
  22.     position: absolute;
  23.     left: 20%;
  24.     top: 50%;
  25.     font-family: Montserrat;
  26.     text-transform: uppercase;
  27.     overflow: hidden;
  28.     white-space: nowrap;
  29. }

这段CSS代码用于样式化您的侧边栏元素，但您遇到了文本对齐问题，文本偏离得太远。

英文:

I am trying to teach myself CSS and I am struggling with alignment. What I want to achieve is to have a fixed sidebar that has some icons and a rotated text, all of them should be in a column.

My code:

HTML:

  1. <div class="Sidebar">
  2. 	<div id="S1" class="SBlock">
  3. 		<a href="https://twitter.com"><img src="Twitter_Logo.png" width=10px height=10px></a>
  4. 	</div>
  5. 	<div id="S2" class="SBlock">
  6. 		<a href="https://linkedin.com"><img src="Linkedin_Logo.png" width=10px height=10px></a>
  7. 	</div>
  8. 	<div id="Follow" class="SBlock">
  9. 		Follow Us
  10. 	</div>
  11. </div>

CSS:

  1. .Sidebar {
  2. 	position: fixed;
  3. 	top: 50%;
  4. 	height: 300px;
  5. }
  7. #S1 {
  8. 	position: absolute;
  9. 	left: 20%;
  10. 	top: 10%;
  11. }
  13. #S2 {
  14. 	position: absolute;
  15. 	left: 20%;
  16. 	top: 20%;
  17. }
  19. #Follow {
  20. 	transform: rotate(-90deg);
  21. 	font-size: 12px;
  22. 	position: absolute;
  23. 	left: 20%;
  24. 	top: 50%;
  25. 	font-family: Montserrat;
  26. 	text-transform: uppercase;
  27. 	overflow: hidden;
  28. 	white-space: nowrap;
  29. }

Which produces this:

Result:

It works fine for the icons, I assume that is because they are the same size, but the text is way further to the right. Any ideas?

答案1

得分: 1

  1. .Sidebar {
  2.     position: fixed;
  3.     top: 50%;
  4.     display: flex;
  5.     flex-direction: column;
  6.     align-items: center;
  7. }
  9. .SBlock {
  10.     margin: 10px 0;
  11. }
  13. #Follow {
  14.     transform: rotate(-90deg);
  15.     font-size: 12px;
  16.     font-family: Montserrat;
  17.     text-transform: uppercase;
  18.     white-space: nowrap;
  19.     writing-mode: vertical-rl;
  20.     text-orientation: mixed;
  21. }

请注意，上面的文本是CSS代码，已经翻译好了，没有别的内容。

英文: 
  1.    .Sidebar {
  2.       position: fixed;
  3.       top: 50%;
  4.       display: flex;
  5.       flex-direction: column;
  6.       align-items: center;
  7.     }
  8.     
  9.     .SBlock {
  10.       margin: 10px 0;
  11.     }
  12.     
  13.     #Follow {
  14.       transform: rotate(-90deg);
  15.       font-size: 12px;
  16.       font-family: Montserrat;
  17.       text-transform: uppercase;
  18.       white-space: nowrap;
  19.       writing-mode: vertical-rl;
  20.       text-orientation: mixed;
  21.     }

Try this...

答案2

得分: 0

尝试使用 writing-mode: sideways-lr 代替 transform: rotate(-90deg)，以避免额外的空间。而且您不需要使用 position: absolute 来使所有项目在侧边栏中对齐。

阅读更多关于 writing-mode。

  1. .Sidebar {
  2.   position: fixed;
  3.   height: 300px;
  4.   display: flex;
  5.   flex-direction: column;
  6.   background: red;
  7.   align-items: center;
  8.   width: 50px;
  9. }
  11. #Follow {
  12.   font-size: 12px;
  13.   font-family: Montserrat;
  14.   color: blue;
  15.   writing-mode: sideways-lr;
  16. }
  1. <div class="Sidebar">
  2.     <div id="S1" class="SBlock">
  3.         <a href="https://twitter.com"><img src="Twitter_Logo.png" width=10px height=10px></a>
  4.     </div>
  5.     <div id="S2" class="SBlock">
  6.         <a href="https://linkedin.com"><img src="Linkedin_Logo.png" width=10px height=10px></a>
  7.     </div>
  8.     <div id="Follow" class="SBlock">
  9.         Follow Us
  10.     </div>
  11. </div>
英文:

Try to use writing-mode: sideways-lr instead of transform: rotate(-90deg) to avoid the extra space. And you don't need position: absolute to get all items align in the sidebar.

Read more about writing-mode.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .Sidebar {
  2.   position: fixed;
  3.   height: 300px;
  4.   display: flex;
  5.   flex-direction: column;
  6.   background: red;
  7.   align-items: center;
  8.   width: 50px;
  9. }
  11. #Follow {
  12.   font-size: 12px;
  13.   font-family: Montserrat;
  14.   color: blue;
  15.   writing-mode: sideways-lr;
  16. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;Sidebar&quot;&gt;
  2. 	&lt;div id=&quot;S1&quot; class=&quot;SBlock&quot;&gt;
  3. 		&lt;a href=&quot;https://twitter.com&quot;&gt;&lt;img src=&quot;Twitter_Logo.png&quot; width=10px height=10px&gt;&lt;/a&gt;
  4. 	&lt;/div&gt;
  5. 	&lt;div id=&quot;S2&quot; class=&quot;SBlock&quot;&gt;
  6. 		&lt;a href=&quot;https://linkedin.com&quot;&gt;&lt;img src=&quot;Linkedin_Logo.png&quot; width=10px height=10px&gt;&lt;/a&gt;
  7. 	&lt;/div&gt;
  8. 	&lt;div id=&quot;Follow&quot; class=&quot;SBlock&quot;&gt;
  9. 		Follow Us
  10. 	&lt;/div&gt;
  11. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: -1

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

英文:

I'd suggest you use Flexbox which is so nice for designing layouts also, alignment is so easy using it.
This article is a good point to start:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

huangapple
  • 本文由 发表于 2023年2月18日 02:15:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/75487930.html
  • alignment
  • css
  • html
  • position
  • sidebar
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定