Question

我在自举列中旋转了90度的文字，现在我无法将其置于列的中心位置或向左移动。我尝试使用填充，对齐和中心块，但没有任何东西会让它向左移动。就像它出于某种原因撞到左侧的墙壁一样。

这是html：

#whatis {
  padding-top: 120px;
}
#vertical {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  font-family: 'Oranienbaum', serif;
  min-width: 315px;
  color: #231B65;
  font-size: 40px;
  border-style: solid;
  border-color: white;
  border-width: 4px;
  padding-left: 15px;
  padding-right: 15px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div id="pg03" class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="row">
        <div id="whatis" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <h3 id="vertical" class="center-block"> What is Omni X?</h3>
        </div>
        <div id="infobox" class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
          <div class="row">
            <div id="info" class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
              <p>...</p>
            </div>
            <div id="img" class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
              <a href="birdgirl.jpg">
                <img src="birdgirl.jpg" class="center-block">
              </a>
            </div>
            <div id="info" class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
              <p>...</p>
            </div>
            <div id="img" class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
              <a href="birdgirl.jpg">
                <img src="birdgirl.jpg" class="center-block">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

任何解决方案或帮助将非常感谢！

Answer 1

正如问题评论中所提到的，这是一个transform-origin问题，需要一些数学来解决。

要获得正确的旋转，您需要添加transform-origin 50% 150%，它会为您提供所需的输出。

下面是一个工作演示，您可以看到元素符合边框和尺寸设置。

如果您需要更高一点的文字，那么只需将其减少10% 30%个增量。

＆＃13;

#whatis {
  padding-top: 120px;
}
#vertical {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: 50% 150%;
  font-family: 'Oranienbaum', serif;
  min-width: 315px;
  color: #231B65;
  font-size: 40px;
  border-style: solid;
  border-color: white;
  border-width: 4px;
  padding-left: 15px;
  padding-right: 15px;
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div id="pg03" class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="row">
        <div id="whatis" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <h3 id="vertical" class="center-block"> What is Omni X?</h3>
        </div>
        <div id="infobox" class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
          <div class="row">
            <div id="info" class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
              <p>...</p>
            </div>
            <div id="img" class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
              <a href="birdgirl.jpg">
                <img src="birdgirl.jpg" class="center-block">
              </a>
            </div>
            <div id="info" class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
              <p>...</p>
            </div>
            <div id="img" class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
              <a href="birdgirl.jpg">
                <img src="birdgirl.jpg" class="center-block">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

我在引导程序中旋转了一些文本，现在它在屏幕左侧卡住了一英寸

1 个答案: