randombits randombits - 1 month ago 8
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/

Answer

Replace the float:left to:

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

here is the fiddle: jsfiddle