如何在其表格的左上方对齐垂直旋转的文本标题？

Question

我想对齐表单标题文本，该文本标题文本从div列的顶部和左侧从CSS旋转-90°。 基本上，我旋转它并将其粘贴在右侧的相关表单上。

问题是，取决于标题文本的长度，如果我使用top:50%; ，我将不会获得相同的结果top:50%; 在表单标题DOM节点上。 我做了一张照片，使它更清晰：

如您所见，容器列将当前页面中的徽标和表单行中的表单对齐。 表单行（在徽标之后）必须具有位于主页中心的字段，并在左侧偏移空间中显示表单标题。

如果主表单标题文本较长，则会得到如下结果：

到目前为止我尝试过的主要结构是这样的（ className代表class ，我正在使用React）：

  <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处于内部） ，我最终无法垂直对齐
• 如果我将标题放置在主表单列中，然后将表单放置在具有偏移量的嵌套列中（将标题向左拉，并放置在表单字段列之后），则可以通过使用display和position css属性来获得所需的内容但是它不能解决表单标题的任何长度的问题，它特定于实际标题文本的长度。 此外，我无法将标题的左上角对齐到表单列的左侧。

请不要犹豫，要求更多详细信息。

Answer 1

像这样：

 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>