Question

我有一个主标题和三个徽标/图标。图标向右浮动，但我的主要图像/标题我想要居中。它可能不起作用，因为我在同一行上浮动图标，但我怎样才能解决这个问题，并根据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（块类型）而不是图像（内联块类型）创建了jsfiddle。我给了divs宽度和bg颜色，以便它们可见。我确保使用最小宽度不会意外地覆盖您的图标。

编辑：

我使用left:50%在图片周围使用了一个div，它是绝对定位的并且水平居中。然后我向图像本身添加了left:-50%;，以便它将在页面上居中。

.title {
    left:50%;
    position:absolute;
    width:100px;
    height:auto;
}
.title img{
    left:-50%;
}

http://jsfiddle.net/mE8mx/2/

Answer 2

我将图标包装在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;
}

将同一行中的几个<img/>中的一个居中

2 个答案: