Question

我试图在div的中心（导航按钮）中显示垂直文本，它嵌套在浮动元素中，我设置大小，magin：auto，vertical-align但是文本位于边缘对中心。有没有其他方法可以将文本放在而不使用绝对定位？

<nav>
      <div class="button"><p class="rotare">1st button</p></div>
      <div class="button">1</div>
      <div class="button">1</div>
      <div class="button">1</div>
</nav>

nav {
    width: 50px;
    height: 600px;
    background-color: red;
    margin-left: 0px;
    top:0px;
    position: absolute;
    display: inline-block;
    float:left;
}

.button {
    width: 50px;
    height: 150px;
    background-color: pink;
}

.rotare {
        position: relative;
        text-align: center;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        background-color: white;
        margin:auto;
        vertical-align: middle;
        width: 100px;
        height: 20px;
}

Answer 1

您可以使用绝对定位执行此操作，但无需通过简单地将这些规则添加到现有css中手动将内容推送到其位置：

.button {
    position: relative;
}

.rotare {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
}

这是一个正在行动的JS小提琴：http://jsfiddle.net/grammar/NgrWg/ 这里有一篇文章更详细地解释了这种垂直居中的方法：http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

编辑 - 没有绝对定位的次要方法

另一种方法是分别使用table和table-cell作为包装器和文本的显示属性。我已经更新了小提琴以显示该方法：http://jsfiddle.net/grammar/NgrWg/1/。

这是另一篇解释此table-cell技巧的文章，并概述了第三种垂直居中的技巧：http://css-tricks.com/centering-in-the-unknown/

如何使用float属性在div中垂直居中旋转文本？

1 个答案: