对齐左侧的元素一个元素旋转-90度 [英] Align to left side of contaner a element rotated -90deg

问题描述

div {
  width: 300px;
  height: 300px;
  border:1px solid black;
}
h1 {
  width: 300px;
  transform: rotate(-90deg)
}

<div>
  <h1>Hola</h1>
</div>

如果你尝试这个片段，你会看到 h1 被旋转并放置在div的中心（有意义，它们有相同的宽度）

If you try this snippet, you will see that the h1 is rotated and placed in the center of the div (makes sense, they have same width)

但是如何将它对齐呢？ （弹性容器宽度）

But how to align it to the left? (flexible container's width)

推荐答案

检查它是否会给出您需要的解决方案..

check this out it will give a direction to your required solution..

 div {
   width: 300px;
   height: 300px;
   border: 1px solid black;
 }
 h1 {
   width: 70px;
   margin-left: -20px;
   float: left;
   transform: rotate(-90deg)
 }

<div>
  <h1>Hola</h1>
</div>

更新

也可以这样做

 div {
   width: 300px;
   height: 300px;
   border: 1px solid black;
 }
 h1 {
   position: absolute;
   left: -10px;
   top: 2px;
   transform: rotate(-90deg)
 }

<div>
  <h1>Hola</h1>
</div>

这篇关于对齐左侧的元素一个元素旋转-90度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！