1

我试图在嵌套在浮动元素中的 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;
}
4

1 回答 1

2

您可以使用绝对定位来做到这一点，但无需手动将内容推送到其位置，只需将这些规则添加到现有 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 /绝对水平垂直居中CSS /

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

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

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

于 2013-09-27T15:06:24.793 回答