html - 如何在具有 float 属性的 div 中垂直居中旋转文本？

Question

我试图在嵌套在 float 元素中的 div(导航按钮)的中心准确显示垂直文本，我设置了 size,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 Fiddle 的实际应用:http://jsfiddle.net/grammar/NgrWg/这里有一篇文章更详细地解释了这种垂直居中的方法:http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

编辑 - 没有绝对定位的辅助方法

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

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