Question

当我旋转一些跨度时，那里的文本没有水平对齐。您可以在下面看到示例。在这个例子中，我们有三个旋转但仍然存在对齐问题。

＆＃13;

body{
    padding-left:10px;
}
.bordered{
  border-left: 2px solid gray;
  position: relative;
  padding-top: 4em;
  padding-bottom: 4em;
  padding-left: 1em;
}
 .bordered>span{
    display: block;
    background-color: #ccc;
    padding: 0.34em;
    font-weight: 300;
    font-size: 0.8em;
    color: gray;
    position: absolute;
    -webkit-transform: rotate(90deg);
    margin: 0;
    left: -2em;
    top: ms(3);
  }

＆＃13;

<section class="hexa-container">
    <section class="hexa-content bordered">
        <span>Services</span>
    </section>
</section>

<section class="hexa-container">
    <section class="hexa-content bordered">
        <span>Works</span>
    </section>
</section>

<section class="hexa-container">
    <section class="hexa-content bordered">
        <span>Blog</span>
    </section>
</section>

＆＃13;

Answer 1

尝试此操作：设置span块的宽度。并相应地设置左：[value]。

HTML

<section class="hexa-container">
<section class="hexa-content bordered">
    <span>Services</span>
</section>
</section>
<section class="hexa-container">
<section class="hexa-content bordered">
  <span>Works</span>
</section>
</section>
<section class="hexa-container">
<section class="hexa-content bordered">
  <span>Blog</span>
</section>
</section>

更新了CSS

body {
padding-left:10px;
}
.bordered {
border-left: 2px solid gray;
position: relative;
padding-top: 4em;
padding-bottom: 4em;
padding-left: 1em;
}
.bordered>span {
display: block;
background-color: #ccc;
padding: 0.34em;
font-weight: 300;
font-size: 0.8em;
color: gray;
position: absolute;
width:80px;
transform:rotate(90deg);
margin: 0;
position:absolute;
left: -3.4em;
}

以下是工作 Demo 。希望这对你有用。

Answer 2

您可以使用transform-origin属性设置旋转点，默认为中心，并且跨度文本的长度不同，这就是旋转时对齐受到干扰的原因。如果你从左下角旋转它应该工作。

以下是修改后的CSS，here是演示

的链接

body{
    padding-left:10px;
}
.bordered{
  border-left: 2px solid gray;
  position: relative;
  padding-top: 4em;
  padding-bottom: 4em;
  padding-left: 1em;
}
 .bordered>span{
     -webkit-transform: rotate(90deg);
     -webkit-transform-origin: 0% 0%;
    display: block;
    background-color: #ccc;
    padding: 0.34em;
    font-weight: 300;
    font-size: 0.8em;
    color: gray;
    position: absolute;      
    left: -1px;
    top: ms(3);
    margin-left:10px
  }

旋转后文本的位置

2 个答案: