Center div inside a div vertically - html

Question

I have tried all methods i could find .. and nothing worked for me...
i just can wrap my head around what is the problem of aligning a div (or a block element) inside another div .. what could be so difficult..
I want to align the green block vertically.
here is the 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;
}
Please .. can any one help .. and explain what am i dooing wrong ?
Edit:
Let me be more clear...
I need all element in one line.
just the blocks needs to be aligned at the vertical middle of the text.
Edit2: here is an image

Answer 1

New Answer
Here is the new fiddle link 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>
Screenshot of output
Old Answer
Here is the required output
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;
}
For inner divs I added display as inline-table so that they will not be treated as block element and shown in one line. For the outer div I added text-align as center. SO that it will show the contents in center.
Only 2 changes done to your fiddle.
For inner div instead of float: right I added display:inline-table
And for outer div added text-align:center.

Answer 2

http://fiddle.jshell.net/n234A/
Give your green block an appropriate top margin to make them sit in the middle of the wrapper.
In this demo I gave the wrapper div a red background to show centering better

Answer 3

you can use display:flex to do this : http://codepen.io/gc-nomade/pen/wmECy
html,body {
height:100%;
width:100%;
margin:0;
}
body , body > div{
display:flex;
}
div {
margin:auto;
}
.green-block {
background-color: #02A556;
margin: 0 .25em 0 .25em !important;
width: 1em;
height: 0.5em;
order:4;
}
.first {
flex:1;
order:1;
}
or display:table http://jsfiddle.net/MxE8Y/5/ (includes IE8)
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
div {
display:table;
direction:rtl;
margin:auto;
border-spacing:0.25em;
}
.green-block {
background-color: #02A556;
width: 1em;
height: 0.5em;
display:table-cell;
}

Answer 4

.green-block {
background-color: #02A556;
margin: 6px 10px!important;
width: 1em;
height: 0.5em;
}

Answer 5

Demo
Is it ok ?
.centerwrapper div:last-child{
margin-top:-8px;
}

Answer 6

You must display all divs as inline-blocks
.centerwrapper div {
display: inline-block;
}

Answer 7

HTML Code
Average
and CSS
.green-block {
background-color: #02A556;
margin: 0 .25em 0 .25em !important;
width: 1em;
height: 0.5em;
margin:10px!important;
list-style:none;
}
.pull-right {
float: right;
}
.rtl {
direction:rtl;
}
.centerwrapper {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
}
.clear{
clear:both;
}
use this.and give margin at what size you want