html - Css align div and text

Question

I am trying to create a chart key.

I am using css and html.

At the moment, I have it so the key title is displayed with the params next to it, each param has a coloured square and text.

However, they do not align, I want the text to be next to the colored square.

To see more of what I am on about see this jsfiddle by clicking here or simply view the code below:

HTML:

<div class="asset-views-key">
<div class="asset-views-key-title">Key:</div>
<div class="asset-views-key-param">
    <div class="asset-views-key-square" style="background-color: #FF0000;"></div>Negative
</div>  
<div class="asset-views-key-param">
    <div class="asset-views-key-square" style="background-color: #00FF00;"></div>Positive
</div>
<div class="cb"></div>

CSS:

 .asset-views-key-square {
    width: 8px;
    height: 8px;
}
.asset-views-key-param {
    float: left;
    padding-right: 10px;
}
.asset-views-key-title {
    float: left;
    padding-right: 5px;
}

Answer 1

Like this

demo

css

.asset-views-key{
    vertical-align:middle;       
    float:left;

}
.asset-views-key-square {
    width: 8px;
    height: 8px;
    float:left;
    margin:6px 7px;

}