旋轉後文本的位置

當我旋轉某個跨度時，那裏的文本不會水平對齊。你可以看到下面的例子。在這個例子中，我們有三個可以旋轉的跨度，但是我們有對齊的問題。旋轉後文本的位置

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); 
 
    }

<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>

來源

2015-09-06 Hamid

你怎麼想跨度的樣子？ – CodeRomeos

我希望跨度完全遵循對方。您可以看到「作品」跨度與「服務」和「博客」跨度不完全相同。 – Hamid

您可以使用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 
    }

來源

2015-09-06 15:10:14

試試這個：設置跨度塊寬度。並相應地設置左側：[值]。

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。希望爲你工作。

來源

2015-09-06 14:58:37 CodeRomeos

旋轉後文本的位置

回答

相關問題