0

我一直在与以下布局作斗争并且可以接近但我的 div 是正确的并且我的文本放错了位置，反之亦然。这就是我想要的，想象一下这是一个最大化的浏览器......

+----------------------------+
|    |#|    |@@@@|    |&|    |
|    |#|    |@@@@|    |&|    |
|    |#|    |@@@@|    |&|    |
|    |#|    |@@@@|    |&|    |
|    |#|    |@@@@|    |&|    |
+----------------------------+

整个页面具有白色背景。然后我只需要三个颜色相同的 div，例如黑色，100% 高度。所以在我蹩脚的 ASCII 艺术绘图中，第一个 div 是用“#”符号填充的“列”，第二个 div 是用“@”符号填充的列，第三个 div 是用“&”符号填充的列。

在中间列（“@”符号）上，我想在其上放置一段旋转 270 度的文本。只有一个单行字符串，长度为 10 个字符，垂直和水平居中（甚至水平居中也可以）。

这是我的 CSS - 请记住这里有垃圾，因为我在发布之前经历了许多再现。同样，我可以让我的 div 变得足够简单，但是文本是错误的，或者如果我让文本更正了 div 错误。

.container-left
{
        height: 100%;
        background-color: #000;
        display: inline-block;
        margin: 1px;
        padding: 1px;
        width: 5px;
}

.container-middle
{
        height: 100%;
        background-color: #000;
        display: inline-block;
        margin: 0px;
        padding: 0px;
        width: 50px;
        z-index: 1;
        overflow: none;

        display: -ms-flexbox;
        -ms-flex-pack:center;
        -ms-flex-align: center;

        display: -moz-box;
        -moz-box-pack: center;
        -moz-box-align: center;

        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;

        display: box;
        box-pack: center;
        box-align: center;
}

.container-right
{
        height: 100%;
        background-color: #000;
        display: inline-block;
        float: left;
        margin: 1px;
        padding: 1px;
        width: 5px;
}

我的 HTML 是...

<div style='margin: 0 auto;'>
    <div class='container-left'></div>
    <div class='container-middle'>
        <p class='rotate'>This text should be rotated</p>
    </div>
    <div class='container-right'></div>
</div>
4

1 回答 1

0
  1. 为您的容器使用浮动
  2. 制造container-middle和p相对
  3. 使文本p牢不可破。p使用它的宽度和宽度计算位置container-middle： p.left = (container.width - p.width) / 2
  4. p原点旋转(50%,50%)

所以就这样结束了

http://jsfiddle.net/kTDfH/

于 2013-09-23T01:35:57.720 回答