Question

我想在

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

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

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

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

主结构是这样的（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>

我尝试了各种方法：

上面的版本：如果我把标题放在它自己的列中，它可以让我确定无论屏幕尺寸如何，它的宽度都会很好，但是列的高度太小（只有一个{{1在旋转之前），我最终无法垂直对齐
如果我把标题放在主窗体列中，并且我将表单放在带有偏移的嵌套列中（标题被拉向左并位于表单字段列之后）我几乎得到了我想要的显示和定位css属性但它没有解决任何长度的表头的问题，它特定于实际的头文本长度。此外，我无法在表格栏左侧的标题左上角对齐。

请不要犹豫，要求提供更多细节。

1 个答案:

答案 0 :(得分：1)

Answer 1

这样的事情：

＆＃13;

which adb

＆＃13;

chmod -R 777 platform-tools

＆＃13;

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

1 个答案: