Question

我想在不使用box属性的情况下将文本垂直对齐，因为它在IE9中不起作用所以我已经阅读过了。我这里只有IE 10 ......

我也尝试过display：table-cell和vertical-align：middle但这会破坏整个布局。

我的方案是否有任何支持IE9 +，Chrome / Firefox（最新版）的垂直对齐技巧。

<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
    <div style="width:50px;height:100%;">
        <div class="fluid-column" style="height:80%;background-color:green;">
            <div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff99cc;height:25%;">1</div>
            <div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff33cc;height:50%;">2</div>
            <div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff66cc;height:25%;">3</div>
        </div>   
        <div class="fix-column" style="height:20%;background-color:violet">
            <div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:orange;height:50%;">Total</div>
            <div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:blue;height:50%;">Test</div>
        </div>
    </div>
</div>

Answer 1

我刚在div标签中添加了"text-align: center;"。完成后，请查看以下链接.. http://jsfiddle.net/J8rL7/15/

Answer 2

让我们更新这个并走老路，所以旧的IE也应该在运行中：让我们使用内联框的规范，并使用一个内联级空元素来保证垂直对齐 DEMO测试：http://jsfiddle.net/D9gnP/6/ - http://jsfiddle.net/D9gnP/6/show。

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
div {
    text-align:center;
    /* text-indent:-0.5em; to swallow word spacing , should be right value */
}
div span {
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0;/* no need to have a width, it's got be invisible */
    margin:0 -5px;/* this will reduce effect of word spacing to none, it can be a little oversized */
}

~~如果要使用table-cell，则需要从绘制列的主容器开始。最后使用table-cells来使用垂直对齐规则我添加了额外的跨度来实现它：~~

http://jsfiddle.net/D9gnP/

.fluid-column, .fix-column{ display:table-row; width:100%; } .fluid-column > div, .fix-column > div{ display:table; height:100%; width:100%; } .fluid-column > div > span, .fix-column > div> span { display:table-cell; vertical-align:middle; }

Answer 3

我之前使用过这个技巧进行垂直对齐：

HTML：

<div id="container">
    <div class="center">vertically centered content</div>
</div>

CSS：

#container { white-space:nowrap; height:200px; }
#container:before { content:""; display:inline-block; width:0; height:100%; vertical-align:middle; }
.center { display:inline-block; vertical-align:middle; white-space:normal; }

这会在具有class="center"的元素之前创建一个伪元素，并使用inline-block，以便vertical-align样式生效。

这是一个jsfiddle，所以你可以检查它是否适合你：http://jsfiddle.net/Etzpj/

我认为在你的情况下，你需要用另一个元素包装每个单元格上的文本才能使这个技巧发挥作用。

编辑：我在你的小提琴http://jsfiddle.net/J8rL7/25/

中使用了这个技巧

Answer 4

http://jsfiddle.net/J8rL7/24/

如果你看http://www.vanseodesign.com/css/vertical-centering/和标题：绝对定位和拉伸

它需要在每个文本字段和几个类

周围添加一个范围

.vert {
  position: relative;  
}

.span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 90%;
    height: 30%;
    margin: auto;   

}

中心文本在div中垂直居中

4 个答案: