randombits randombits - 2 months ago 11
CSS Question

center aligning text to the right of a floating div

I want to create three divs that are small boxes that are colored respectively:

<div class="foo blue"></div>Blue
<div class="foo purple"></div>Purple
<div class="foo wine"></div>Wine

.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);

.blue {
background: #13b4ff;

.purple {
background: #ab3fdd;

.wine {
background: #ae163e;

This works for everything except I need the text next to each box to align to the right of its respective div. Everything should be in one row, with the text vertically aligned to its div. This just forces text outside the confines of the three divs. What's the appropriate way to wire it together?

jsfiddle: http://jsfiddle.net/vsfu72j8/1/


Replace the float:left to:

.foo {
  display: inline-block;
  vertical-align: middle;

here is the fiddle: jsfiddle