Как я могу центрировать ряд относительно центрированных s в контейнере шириной 100%

Question

Я пытаюсь центрировать ряд относительно центрированных divs, которые содержат изображения с переменами наведения, которые меняются на другое изображение.

В процессе создания перехода на рабочий стол, я позиционировал контейнеры для каждого 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 не влияет на плавающие элементы, кроме центрирования содержимого внутри них.

Вы можете увидеть это here, где я переделал ваш css.