Master-X
Форум | Новости | Статьи
Главная » Форум » Дизайн » 
Тема: Помогите с версткой
цитата
15/11/15 в 15:21
 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>
цитата
15/11/15 в 18:40
 sx88
задай блокам, которые должны быть по центру (.blockpupular), стили: display: inline-block; vertical-align: top; и убери там float: left;

а тот див, в котором они находятся (.popularfly), пропиши там: text-align: center;
цитата
15/11/15 в 20:02
 densa
sx88: спасибо большое, то что надо


Эта страница в полной версии