0

我有一个主标题和三个徽标/图标。图标浮动到右侧，但我想要居中的主要图像/标题。它可能无法正常工作，因为我的浮动图标在同一行，但我怎样才能解决这个问题，并根据 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/

4

2 回答 2

0

我使用 div（块类型）而不是图像（内联块类型）制作了一个jsfiddle 。我给了 div 的宽度和背景颜色，以便它们可见。而且我确保您的图标不会被使用最小宽度意外覆盖。

编辑：

我在图片周围使用了一个 div，该 div 通过使用绝对定位和水平居中left:50%。然后我left:-50%;在图像本身添加了一个，这样它就会在页面上居中。

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

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

于 2013-07-13T23:06:52.067 回答
0

我将图标包装在一个 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;
}
于 2013-07-13T23:26:21.697 回答