Question

我想把这些图像居中，但我不能这样做因为花车。我一直试图用我发现的代码（http://jsfiddle.net/JDAyt/）来集中它，但它没有用。

有点帮助会被贬低！

代码在这里：

<style type='text/css'>
@charset "utf-8";
/* Design by @TheGelu */

h1 {
    font: 60px Helvetica, Arial, Sans-Serif;
    letter-spacing: -5px;
    color: #999;
    text-shadow: 0px 3px 8px #2a2a2a;
}
.introBanner {
    background-image: url(bannerIntro.png);
    background-repeat: repeat-x;
    background-position: top;
    height: 330px;
    min-width: 1245px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    margin-bottom: 0px;
    padding-left: 0px;
}
.introPhoto {
    background-image: url(introPhoto.png);
    background-repeat: no-repeat;
    background-position: center top;
    text-align:center;
    height: 203px;
    width: 203px;
    float:left;
}
.introWrapper {
    width: 1221px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 20px;
    font-size: 16px;
}
.introFooter {
    background-image: url(introFooter.png);
    background-repeat: repeat-x;
    background-position: bottom;
    height: 47px;
    min-width: 1240px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    margin-bottom: 0px;
    padding-left: 0px;
}
#cf {
    position: relative;
    height: 281px;
    width: 50%;
    margin: 0 auto;
    float: left;
    clear: none;
}
#cf img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
       -moz-transition: opacity 1s ease-in-out;
         -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
    float: left;
    clear: none; 
}
#cf img.top:hover {
    opacity: 0;
    float: left;
    clear: none; 
}
</style>
<body>
    <div id='wrapper' style='text-align: center;'>    
        <div style='float: left; width: 50%'> 
            <div id="cf">
                <img class="bottom" src="http://thegelu.com/blog1b.png" />
                <img class="top" src="http://thegelu.com/blog1a.png" />
            </div>
            <div id="cf">
                <div style='float: left; width: 50%'> 
                    <img class="bottom" src="http://thegelu.com/blog2b.png" />
                    <img class="top" src="http://thegelu.com/blog2a.png" />
                </div>
            </div>
        </div>
</body>

Answer 1

这是您需要做的，请查看此演示 solution

html,body{
    width:100%;
    height:100%;
}
#wrapper {
    width:60%; /* width in compare to browser width*/
    margin:0 auto; /* center the div */
}

为什么之前没有工作？你给了每个50%的儿童div宽度，#wrapper类没有任何width默认情况下提到，所以Wrapper占用了浏览器宽度的100％，而子项占用了父的50％，即包装div，意味着浏览器宽度的50％ .... ..wrap #wrapper div在其他父母的内部，并且宽度小于100％，它总是在中心!!

中心2浮动div

1 个答案: