html - 在 div 中垂直居中 div

Question

我已经尝试了我能找到的所有方法.. 但没有任何效果... 我只是想知道在另一个 div 中对齐一个 div(或 block 元素)的问题是什么......有什么可能如此困难..

我想垂直对齐绿色 block 。

这是 fiddle :http://fiddle.jshell.net/795St/1/

<div class="rtl centerwrapper">
    <div class="green-block pull-right"></div>
    <div class="green-block pull-right"></div>
    <div class="green-block pull-right"></div>
    <div>Average</div>
</div>

.green-block {
    background-color: #02A556;
    margin: 0 .25em 0 .25em !important;
    width: 1em;
    height: 0.5em;
}
.pull-right {
    float: right;
}
.rtl {
    direction:rtl;
}
.centerwrapper {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    overflow: visible;
}

请..任何人都可以帮助..并解释我做错了什么吗？

编辑: 让我更清楚... 我需要一行中的所有元素。 只是 block 需要在文本的垂直中间对齐。

Edit2:这是一张图片

Answer 1

新答案

这是新的 fiddle 链接 http://fiddle.jshell.net/795St/16/

CSS

.green-block {
    background-color: #02A556;
    margin: 0 .25em 0 .25em !important;
    width: 1em;
    height: 0.5em;
    vertical-align: middle;
    position: relative;    
}
.pull-right {
    display: inline-table;
}
.rtl {
    direction:rtl;
}
.centerwrapper {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    overflow: visible;
}

HTML
<div class="rtl centerwrapper">

    <div class="green-block pull-right"></div>
    <div class="green-block pull-right"></div>
    <div class="green-block pull-right"></div>
    <div class="pull-right">Average</div>
</div>

输出截图

旧答案

这是所需的输出 http://fiddle.jshell.net/795St/5/

.pull-right {
    display: inline-table;
}

.centerwrapper {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    overflow: visible;
    text-align: center;
}

对于内部 div，我将 display 添加为 inline-table，这样它们就不会被视为 block 元素并显示在一行中。对于外部 div，我将 text-align 添加为 center。这样它将在中心显示内容。

您的 fiddle 只做了 2 处更改。

1. 对于内部 div 而不是 float: right 我添加了 display:inline-table
2. 并为外部 div 添加了 text-align:center。