densa
пол дня парюсь, не получается, может коллективный разум поможет?
верстка дивами, есть три блока внутри одного, они прилипаются к левому краю, а нужно что бы было по центру
код стилей
.popularfly {
width: 100%;
background-color: #ebebeb;
padding: 10px;
margin: 10px 0 5px 0;
border: 1px solid #0072bc;
}
.popularfly h2 {
color: #0072bc;
margin: 10px;
font-size: 20px;
}
.blockpupular {
width: 272px;
background:#0072bc;
margin: 10px 20px 10px 20px;
padding: 10px;
float:left;
}
.popularimage {
overflow:hidden;
width: 270px;
height: 157px;
border: 1px solid #FFF;
position:relative;
}
.popularimage img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.popularimage img:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.popularimage span, .popularimage span2 {
display: inline-block;
position: absolute;
top: 50px;
left: 0px;
color: #FFF;
text-shadow: 0px 0px 5px black;
font-size: 30px;
font-weight: bold;
text-decoration: underline;
}
.popularimage span {
padding: 0 0 0 100px;
}
.popularimage span2 {
padding: 0 0 0 80px;
}
.popularimage span:hover, .popularimage span2:hover {
color: #FF0;
}
.popularcity {
width: 50%;
padding: 5px 0 0 0;
float:left;
text-align:left;
color:#FFF;
}
.popularcity2 {
width: 50%;
padding: 5px 0 0 0;
float:right;
text-align:right;
color:#FFF;
}
.popularcity a, .popularcity2 a {
color:#FFF;
font-size: 14px;
line-height: 1.4;
}
.popularcity a:hover, .popularcity2 a:hover {
color: #fff200;
text-decoration: none;
}
.clear { clear: both;}
@media screen and (max-width: 800px) {
.popularfly{
display:none;
}
}
хтмл код
<div class="popularfly" >
<div class="blockpupular"><div class="popularimage"><a href="#"><img width="276" height="157" src="images/russia.jpg" /><span2>Россия</span2></a></div>
<div class="clear"></div></div>
<div class="blockpupular">
<div class="popularimage"><a href="#"><img width="276" height="157" src="images/bangkok.jpg" /><span>Азия</span></a></div>
<div class="clear"></div>
</div>
<div class="blockpupular">
<div class="popularimage"><a href="#"><img width="276" height="157" src="images/paris.jpg" /><span2>Европа</span2></a></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>