如何對齊窗體左上角的垂直旋轉文本標題？

我想對齊表格標題文本，我旋轉-90°從CSS 頂部和左它的列div。基本上，我將它旋轉並粘貼在右側的相關表單上。如何對齊窗體左上角的垂直旋轉文本標題？

問題是，根據標題文本的長度，如果我在表單標題DOM節點上使用top:50%;，我將不會得到相同的結果。我做了一個圖像，使其clearler：

正如你所看到的，容器列排列形式在當前頁兩個標誌和表格行。表格行（徽標之後）必須具有位於主頁面上的字段，並在左側偏移空間中顯示錶格標題。

如果主窗體標題文本是更長的時間，我得到的結果是這樣的：

主要結構是那麼像這樣（className代表class，我使用的反應）在什麼我試過到目前爲止：

<div className='container'> 
     <!-- logo container --> 
    <div className='row'> 
     <div className='col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4 text-center'> 
      <br/> 
      <img src='/img/logo.svg' className='logo_img' /> 
     </div> 
    </div> 
    <!-- form container --> 
    <div className='row'> 
     <div className='col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4 text-center'> 
     <!-- here I add 2 tested columns for the form internal layout --> 
     <div className='col-xs-1 col-sm-1 ...'> 
      <h1 className='formHeader'>Form Header</h1> 
     </div> 
     <div className='col-xs-10 ...'> 
      <!-- here I put my form fields and submit button --> 
     </div> 
     </div>

我嘗試過各種方法：

以上版本：如果我把頭在自己的山坳它允許我確定無論屏幕大小如何，它都能很好地定位在寬度上，但是列太小（在旋轉之前只有一個h1），我最終不能垂直對齊
如果我把頭部放在主窗體列中，並且我把窗體放在一個帶有偏移量的嵌套列中（頭部被拉到左邊並且放在窗體域列的後面），我幾乎通過玩顯示和位置CSS屬性，但它不解決任何長度的表單頭的問題，它是特定於實際的頭文本長度。此外，我無法對齊左側表格欄左側的標題。

請不要猶豫，要求更多的細節。

來源

2016-03-28 Billybobbonnet

這裏的最小演示將是有益的...不是整個事情...剛夠演示問題... –

可能是一個http://stackoverflow.com/questions/36140628/resize-div-when-content-is-rotated/36141551（至少同樣的方法使用translate。你應該讓你的CSS以及，所以我們可以幫助你在哪裏問題是，它們也可能是一種容器足夠高的方法（至少高度=文本長度）以包含整個旋轉的文本。 –

我們確實需要更多細節:)。完整的HTML和類+ CSS添加到引導。你甚至可以設置一個片段來顯示你的代碼在你的問題:)它會幫助你得到相關的答案..或評論提示這是我們得到的最多：http://codepen.io/anon/pen/EKXGyL –

事情是這樣的：

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, *::before, *::after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    margin-top: 10px; 
 
} 
 

 
div { 
 
    box-shadow:1px 1px 1px 1px grey; 
 
    height: 500px; /* demo only */ 
 
} 
 

 
.rotator { 
 
    position: relative; 
 
} 
 

 
.formHeader { 
 
    position: absolute; 
 
    padding: 0 1em; 
 
    margin: 0; 
 
    top:0; 
 
    left: 50%; 
 
    white-space:nowrap; 
 
    background: pink; 
 
    transform-origin: center right; 
 
    transform: translate(-100%,-50%) rotate(-90deg); 
 
    
 
    
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class='row'> 
 
    
 
      <div class='rotator col-xs-1'> 
 
       <h1 class='formHeader'>Form Header</h1> 
 
      </div> 
 
      <div class='col-xs-11 ...'> 
 
       <!-- here I put my form fields and submit button --> 
 
      </div> 
 
     </div> 
 
    </div>

來源

2016-03-28 13:50:42

這很好。很好的答案，類似於@GCyrillus所做的答案。謝謝你們兩個人:) – Billybobbonnet

如何對齊窗體左上角的垂直旋轉文本標題？

回答

相關問題