I have one main title and three logos/icons. The icons are floated to the right, but my main image/title I want centered. It probably isn't working because of my floated icons on the same line, but how can I get around that, and center my main image based on the page width of 80%?

here is the HTML:

```
        <img src="reddit.jpeg" class="icons" id="reddit">
        <img src="stack.jpeg" class="icons" id="stackoverflow">
        <img src="dropbox.jpg" class="icons" id="dropbox">
        <img src="title.jpg" class="title">

```

CSS:

```
body {
width: 80%; /* 1150px*/
margin:0 auto;
}

.icons {
float: right;
margin:0 0.43478261%;
opacity:.5;
}

.title {
display:block;
margin:0.86956522% auto;
}

```

**EDIT:** <http://jsfiddle.net/Nilzone/2bfhp/1/>