Разделительная центровка. Более сложный, чем я думал

В скрипке содержится here Разделительная центровка. Более сложный, чем я думал

Код ниже - это образец соответствующего кода, все в скрипке.

HTML

<body> 
<div id="wrapper" > 
    <header> 
     <div class="hwrapper"> 
     <div class="box effect2"> 
      <img src="media/header1.jpg" width="150px" height="150px" style="padding-top:5px;" />    
     </div> 
     <div class="box effect2"> 
      <img src="media/header2.jpg" width="150px" height="150px" style="padding-top:5px;" />    
     </div> 
     <div class="box effect2"> 
      <img src="media/header3.jpg" width="150px" height="150px" style="padding-top:5px;" />    
     </div> 
     <div class="box effect2"> 
      <img src="media/header4.jpg" width="150px" height="150px" style="padding-top:5px;" />    
     </div> 
     <div class="box effect2"> 
      <img src="media/header5.jpg" width="150px" height="150px" style="padding-top:5px;" />    
     </div> 
     </div> 
    </header>

CSS

body { 
    text-align: center; 
    margin:0; 
    padding:0; 
    background-image:url('../media/background.gif'); 
    background-repeat: repeat; 
} 

#wrapper { 

} 

header { 
    width:100%; 
    height:300px; 
    -webkit-box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4); 
    -moz-box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4); 
    box-shadow: inset 0px -3px 5px rgba(50, 50, 50, 0.4); 

} 

/*---------header images--------*/ 

.hwrapper { 

} 

.box { 
    width:160px; 
    height:160px; 
    background:#FFF; 
    margin-top:20px; 
    margin-bottom:20px; 
    margin-left:20px; 
    margin-right:20px; 
    float: left; 
} 

.effect2 { 
    position: relative; 
} 

.effect2:before, .effect2:after { 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 14px; 
    left: 5px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    background: #777; 
    -webkit-box-shadow: 0 15px 10px #777; 
    -moz-box-shadow: 0 15px 10px #777; 
    box-shadow: 0 15px 10px #777; 
    -webkit-transform: rotate(-7deg); 
    -moz-transform: rotate(-7deg); 
    -o-transform: rotate(-7deg); 
    -ms-transform: rotate(-7deg); 
    transform: rotate(-7deg); 
} 

.effect2:after { 
    -webkit-transform: rotate(7deg); 
    -moz-transform: rotate(7deg); 
    -o-transform: rotate(7deg); 
    -ms-transform: rotate(7deg); 
    transform: rotate(7deg); 
    right: 5px; 
    left: auto; 
}

Хорошо, так что я сделал хороший ряд картин, чтобы бежать вдоль верхней части моей страницы с аккуратной страницей локоном эффектом. Проблема в том, что до сих пор она не будет сосредоточена на остальной части моего контента. Он остается слева, что связано с положением float: left css в .box.

Если я убираю float: слева, ряд изображений превращается в столбец, бегущий по странице, вместо хорошей горизонтальной строки.

У меня есть div-класс .hwrapper вокруг моего ряда изображений, чтобы установить правила, чтобы центрировать все, сохраняя поплавок: осталось в .box, но ни один из моих трюков с серединой выравнивания не работает. Я не уверен, где конфликт, возможно, на моей странице curl css?

благодарит заранее.

источник

2013-11-02 mateikav

Там нет такого свойства, как '\t поплавка: средний;' ' –

поплавок: middle' сделал мой день: D –

float:middle недействительной собственности - я удалил это.

Чтобы решить проблему, вы можете просто установить .hwrapper в display:inline-block, заставляя его ширину быть того же размера, что и ее дети.

.hwrapper { 
    display: inline-block; 
}

jsFiddle example - это работает.

Это эффективно центрирует .hwrapper, потому что у вас есть text-align:center, установленный на родительский элемент, в данном случае являющийся body.

источник

2013-11-02 17:40:57

Ахаха! Спасибо. Делает совершенный смысл. – mateikav

@mateikav Рад, что это помогло! –

Если вам нужно центрировать изображения в центральном заголовке, вам нужно настроить несколько вещей.

JSFiddle

.hwrapper { 
display:inline-block; 
text-align:center; 
} 

.box { 
    width:160px; 
    height:160px; 
    background:#FFF; 
    margin-top:20px; 
    margin-bottom:20px; 
    margin-left:20px; 
    margin-right:20px; 
    display:inline-block; 
}

источник

2013-11-02 17:47:03

твоя работа тоже, но Джош ответил первым;) – mateikav

Разделительная центровка. Более сложный, чем я думал

ответ

Смежные вопросы