html - 我怎样才能旋转s 并保持对齐?
问题描述
我正在创建一个侧边栏导航面板,其中包含一些链接,我希望它们横向显示。这是当前的导航面板:
分解它:
- 菜单图标
这是图标的 HTML
<div class="menu-bar-container">
<div class="menu-icon-container">
<span class="fas fa-bars menu-icon"></span>
</div>
</div>
它是CSS:
/* Menu Icon */
.menu-bar-container {
width: 100%;
height: 10%;
display: flex;
align-items: center;
}
.menu-icon-container {
width: 100%;
text-align: center;
}
.menu-icon {
font-size: 19px;
color: darkgrey;
}
- 这些是导航链接,我希望它们垂直而不是水平显示,这是现有代码:
的HTML:
{{-- Social Links --}}
<div class="social-links-container">
{{-- Facebook Link --}}
<div class="fb-link-container">
<a href="">FACEBOOK</a>
</div>
<div class="dot-icon-container">
<span class="far fa-circle dot-icon"></span>
</div>
{{-- Instagram Link --}}
<div class="insta-link-container">
<a href="">INSTAGRAM</a>
</div>
<div class="dot-icon-container">
<span class="far fa-circle dot-icon"></span>
</div>
{{-- Twitter Link --}}
<div class="twitter-link-container">
<a href="">TWITTER</a>
</div>
</div>
CSS:
/* Social Links */
.social-links-container {
width: 100%;
height: 80%;
display: flex;
align-items: center;
}
.dot-icon-container {
margin-inline-start: 30px;
margin-inline-end: 30px;
}
.dot-icon {
font-size: 10px;
}
当我添加transform: rotate(-90deg);
到.social-links-container
类时,结果是这样的:
我怎样才能旋转这些并且仍然使它们居中?谢谢!
解决方案
使用writing-mode: vertical-lr
:
/* Social Links */
.social-links-container {
height: 80%;
display: flex;
align-items: center;
writing-mode: vertical-lr;
justify-content: center;
transform: rotate(180deg);
}
推荐阅读
- algorithm - Algorithm to find all solutions for a boolean sum of products without negation
- go - 更改 2D 数组变量也会更改原始 2D 数组变量。为什么?
- windows - Powershell - 嵌套 IF 在 Do-While 循环中无法正确执行
- php - 在条件下重用表单 HTML 元素
- protocol-buffers - 为什么 protobuf 的 FieldMask 使用字段名而不是字段号?
- cross-reference - 检索给定年份科学论文的引用次数
- python - 删除所有邀请的事件,除非它来自某个公会
- python - 在python中,如何根据具有下限和上限的查找表对范围进行分类
- java - 如果存在 JNDI 资源,则 CDI 有条件地生成/覆盖 bean
- python - 手动更改 PKG-INFO?