html - 将几个 <img> 中的一个放在同一行上

Question

我有一个主标题和三个 Logo /图标。图标向右浮动，但我想要居中的主要图像/标题。它可能无法正常工作，因为我的 float 图标在同一行，但我如何解决这个问题，并根据 80% 的页面宽度将我的主图像居中？

这是 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;
}

编辑: http://jsfiddle.net/Nilzone/2bfhp/1/

Answer 1

我将图标包裹在一个 div 中并将其放置在右边框上，在文档流之外，并将标题图像视为普通横幅:http://jsfiddle.net/2bfhp/2/

<div class='icon-set'>
    <img src="http://i.imgur.com/S5JcLk9.jpg" class="icons" id="reddit"/>
    <img src="http://i.imgur.com/8xLxjd5.jpg" class="icons" id="stackoverflow"/>
    <img src="http://i.imgur.com/uFny2Mp.jpg" class="icons" id="dropbox"/>
</div>
<img src="http://i.imgur.com/CcTWeln.jpg" class="title">

和

body {
    width: 80%;
    /* 1150px*/
    margin:0 auto;
    text-align: center;
    position: relative;
}
.icon-set {
    position: absolute;
    right: 5px;
}