試圖讓垂直文本底部對齊

下面的HTML是沒有工作的許多嘗試之一。這個項目的目標僅僅是在最新的瀏覽器中定位HTML5，所以除了最新的Chrome，Safari，Firefox和IE9測試版之外，沒有必要使用它。

<!DOCTYPE html> 
<html> 
<body> 
    <div style="border: solid 1px red; width:600px; height: 600px"> 
     <span style="-webkit-transform:rotate(- 

90deg);display:block;position:absolute;bottom:600px">My Vertical Text</span> 
     <img src="http://www.gizmodo.com/assets/resources/2007/01/Bill-gates-mugshot.jpg" 

style="position:absolute;bottom:600px" /> 
    </div> 
</body> 
</html>

來源

2010-10-01 Nestor

我想你可能想是這樣的：http://jsfiddle.net/aNscn/3/

bottom: 600px是會得到你一事無成 - 這只是打算把元素600px的從用戶的屏幕的底部了。相反，請給外部div a position: relative，並讓這兩個元素以低的bottom值對齊到其底部。也請查看transform-origin屬性，以確定旋轉後正確定位span。

#outer { 
    border: solid 1px red; 
    width:600px; 
    height: 600px; 
    position: relative; 
} 

#text { 
    -webkit-transform: rotate(-90deg); 
    -webkit-transform-origin: left top; 
    -moz-transform: rotate(-90deg); 
    -moz-transform-origin: left top; 
    -o-transform: rotate(-90deg); 
    -o-transform-origin: left top; 
    transform: rotate(-90deg); 
    transform-origin: left top; 
    position: absolute; 
    bottom: 0; 
    left: 5px; 
} 

#img { 
    position:absolute; 
    bottom: 15px; 
    left: 30px; 
}

來源

2010-10-01 09:13:23

哇，這是有效的。非常令人印象深刻。只是一件事 - 左圖：圖像上的30px假定文本的寬度。是不是可以讓圖像自動浮動到文本的右側？ – Nestor 2010-10-01 09:21:26

@Nestor不是真的，至少不是這種方法，儘管你可以嘗試使用em單位，如果有幫助的話。 – 2010-10-01 09:47:22

試圖讓垂直文本底部對齊

回答

相關問題