0

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

http://jsfiddle.net/J8rL7/6/

我也尝试过 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>
4

4 回答 4

0

让我们更新它并采用旧的方式，所以旧的 IE 也应该加入运行：让我们使用内联框的特定性并使用一个内联级空元素来保护垂直对齐。
演示测试： 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 */
}

如果要使用表格单元格，则需要从绘制列的主容器开始。并以表格单元格结束以使用垂直对齐规则。
我添加了一个额外的跨度来实现它：

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;
}

于 2013-06-15T20:31:01.743 回答
0

I've used this trick before for vertical alignment:

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; }

This creates a pseudo-element before the element with class="center" and uses inline-block so the vertical-align style takes effect.

Here's a jsfiddle so you can check if it works for you: http://jsfiddle.net/Etzpj/

I think that in your case you would need to wrap the text on each cell with another element for this trick to work.

Edit: here i used this trick in your fiddle http://jsfiddle.net/J8rL7/25/

于 2013-06-15T20:40:59.443 回答
0

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;   

}
于 2013-06-15T20:49:05.970 回答
0

我刚刚添加"text-align: center;"了 div 标签。完成了，检查下面的链接.. http://jsfiddle.net/J8rL7/15/

于 2013-06-15T20:29:54.113 回答