我怎样才能使一排相对居中的居中 <div> 在100％的容器宽度中

Question

我正在尝试将一列相对居中的div居中，该div包含具有悬停过渡而变为另一图像的图像。

在使悬停过渡正常工作的过程中，我将每个div的容器放置在相对位置。

我正在尝试使该行居中，因为窗口浏览器越来越小，以使其响应。 发生的行为虽然如此奇怪。 当浏览器窗口变得太小而无法容纳该行图像时，该图像将跳至第二行，但它将在屏幕的左端停止，但不在中心。

是否有人对这种情况的发生有解决方案或了解？ 理想情况下，我希望跳转到第二行的图像居中。

这是我的代码：

http://jsfiddle.net/4kfbh018/

的HTML

<div class="center-logo">
<div class="nbc-container">
<a href="#">
    <div class="nbc press">
        <span></span>
    </div>
</a>
</div>

<div class="npr-container">
<a href="#">
    <div class="npr press">
        <span></span>
    </div>
</a>
</div>

<div class="washington-container">
<a href="#">
    <div class="washington press">
        <span></span>
    </div>
</a>
</div>

<div class="bbc-container">
 <a href="#">
    <div class="bbc press">
        <span></span>
    </div>
 </a>
</div>

<div class="forbes-container">
<a href="#">
    <div class="forbes press">
        <span></span>
    </div>
</a>
</div>

<div class="cnet-container">
<a href="#">
    <div class="cnet press">
        <span></span>
    </div>
</a>
</div>

</div>

的CSS

.center-logo {
margin: 0 auto;
height: 99px;
width: 100%;
}

.press {
    top: 0; bottom: 0; left: 0; right: 0; 
}

.press:hover span {
    opacity: 1;
}

.nbc {
    background-image: url('http://www.yodamark.net/files/7114/0570/5786/nbc.jpg');
    height: 79px;
    width: 79px;

}

.nbc-container {
    height: 79px;
    margin: 10px 10px;
    width: 79px;
    float: left;
}

.nbc span {
    height: 79px;
    width: 79px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0; 
    background-image: url('http://www.yodamark.net/files/4114/1168/9420/nbc-b.jpg');
    opacity: 0;
    transition: linear .2s, box-shadow linear .2s;
    -webkit-filter: grayscale(1);
} 


.npr {
    height: 41px;
    width: 109px;
    background-image: url('http://www.yodamark.net/files/6414/0570/5787/npr.jpg');
    height: 41px;
    width: 109px;
}

.npr-container {
    height: 41px;
    margin: 25px 10px 0 10px;
    width: 109px;
    float: left;
}

.npr span {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0; 
    background-image: url('http://www.yodamark.net/files/6414/1168/8919/npr-b.jpg');
    height: 41px;
    width: 109px;
    opacity: 0;
    transition: linear .2s, box-shadow linear .2s;
    -webkit-filter: grayscale(1);
} 

.washington {
    background-image: url('http://www.yodamark.net/files/6514/0570/5787/wapo.jpg');
    height: 34px;
    width: 232px;
}

.washington-container {
    float: left;
    height: 41px;
    margin: 25px 10px 0 10px;
    width: 232px;
}

.washington span {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0; 
    background-image: url('http://www.yodamark.net/files/6214/1168/8864/wapo-b.jpg');
    height: 34px;
    width: 232px;
    opacity: 0;
    transition: linear .2s, box-shadow linear .2s;
    -webkit-filter: grayscale(1);
} 

.bbc {
    background-image: url('http://www.yodamark.net/files/2914/0570/5785/bbc.jpg');
    height: 35px;
    width: 186px;
}

.bbc-container {    
    height: 35px;
    margin: 25px 10px 0 10px;
    width: 186px;
    float: left;
}

.bbc span {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0; 
    background-image: url('http://www.yodamark.net/files/1314/1168/9450/bbc-b.jpg');
    height: 35px;
    width: 186px;
    opacity: 0;
    transition: linear .2s, box-shadow linear .2s;
    -webkit-filter: grayscale(1);
}

.forbes {
    background-image: url('http://www.yodamark.net/files/2614/0570/5786/forbes.jpg');
    height: 38px;
    width: 117px;
}

.forbes-container {
    height: 38px;
    margin: 25px 10px 0 10px;
    width: 117px;
    float: left;
}

.forbes span {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0; 
    background-image: url('http://www.yodamark.net/files/1514/1168/9431/forbes-b.jpg');
    height: 38px;
    width: 117px;
    opacity: 0;
    transition: linear .2s, box-shadow linear .2s;
    -webkit-filter: grayscale(1);
}

.cnet {
    background-image: url('http://www.yodamark.net/files/5314/0570/5785/cnet.jpg');
    height: 83px;
    width: 85px;
}

.cnet-container {
    height: 83px;
    margin: 0 10px;
    width: 85px;
    float: left;
}

.cnet span {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0; 
    background-image: url('http://www.yodamark.net/files/8014/1168/9440/cnet-b.jpg');
    height: 83px;
    width: 85px;
    opacity: 0;
    transition: linear .2s, box-shadow linear .2s;
    -webkit-filter: grayscale(1);
}

Answer 1

没有浮标

使用display:inline-block而不是float:left 。

text-align:center除了将浮动内容居中之外，对浮动元素没有任何影响。

您可以在这里看到我盖过您CSS的地方。