How to set div and text to vertical middle of it parent - html

Question

I have a two divs it's containing in parent div. first div at left side and second at right.
So, i want a right div at middle of parent with out using margin.
HTML
<div class="clearfix" style="background-color: #CCCCCC;">
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block"><div>Post</div><div>139</div></div>
<div class="inline-block"><div>Following</div><div>139</div></div>
<div class="inline-block"><div>Followers</div><div>139</div></div>
</div>
<div class="rfloat" style="background-color: #00FF66; display: table-cell; vertical-align: middle;">
Follow
Message
Report
</div>
</div>
CSS
.inline-block {
display: inline-block;
}
.rfloat {
float: right;
}
.lfloat {
float: left;
}
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
and here's jsfiddle http://jsfiddle.net/fmr3Y/

Answer 1

This how you can do it
DEMO
HTML
<div class="rfloat" style="background-color: #00FF66; display: table; height: 60px">
CSS
a {
display: table-cell;
vertical-align: middle;
}

Answer 2

Use display:table -- demo
<div class="clearfix" style="background-color: #CCCCCC; display:table;width:100%;">
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block">
<div>Post</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Following</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Followers</div>
<div>139</div>
</div>
</div>
<div class="ss" style="background-color: #00FF66; display: table-cell; vertical-align: middle;"> Report
Message
Follow
</div>
</div>

Answer 3

You could mimic the flex justify-content with display and text-align:justify : DEMO
.inline-block {
display: inline-block;
font-size:16px;/* do not forget to reset font-size to childs*/
font-size:1rem;
text-align:center;/* left, right, .. */
}
.justify:after {
display: inline-table;
content: " ";
width:100%;
height:0;
vertical-align:top;/* no extra gap please */
}
.justify {
text-align:justify;/* will span element from one side to the other */
font-size:0;/* reduce line-height and avoid gap from pseudo element */
}
HTML updated with class name :
<div class="justify" style="background-color: #CCCCCC;">
<div style="padding: 10px; background-color: #0099FF;vertical-align: middle;" class="inline-block">
<div class="inline-block"><div>Post</div><div>139</div></div>
<div class="inline-block"><div>Following</div><div>139</div></div>
<div class="inline-block"><div>Followers</div><div>139</div></div>
</div>
<div class="inline-block" style="background-color: #00FF66; vertical-align: middle;">
Follow
Message
Report
</div>
</div>

Answer 4

I had Changed Your structure to make Right Div at center
<table class="clearfix" style="background-color: #CCCCCC; width: 100%;text-align: center; ">
<colgroup>
<col style="width: 19%"/>
<col style="width: 75%"/>
</colgroup>
<tr>
<td>
<div style="padding: 10px; background-color: #0099FF;" class="inline-block">
<div class="inline-block">
<div>Post</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Following</div>
<div>139</div>
</div>
<div class="inline-block">
<div>Followers</div>
<div>139</div>
</div>
</div>
</td>
<td>
<div style="background-color: #00FF66; vertical-align: middle;">
Follow
Message
Report
</div>
</td>
</tr>
</table>
Here is Working Demo Too.Working Fiddle