中心位置

时间:2015-09-03 09:35:29

标签: html css responsive-design

我尝试在六个单独的div中显示图像。所有div都放置在正确的位置。但是中心div位置看起来像是一个向上而另一个中心div向下我也发布图像所以你更好地理解我想说什么,我也发布HTML和CSS代码.. { {3}}



       .cat_section {
         text-align: center;
       }
       .cateogry_div {
         display: inline-block;
         float: none;
         background-image: url('http://elemisdesign.com/img/114/1.jpg');
         width: 300px;
         height: 200px;
         margin-top: 90px;
         margin-left: 30px;
       }
       .sub_category {
         margin-left: 30px;
         margin-top: 10px;
       }
       .image_cat {
         width: 170px;
         margin-left: 90px;
       }
       .sub_category span {
         font-size: 20px;
         float: right;
         margin-right: 180px;
         margin-top: -90px;
         width: 110px;
         height: 120px;
       }
       .cateogry_div1 {
         display: inline-block;
         float: none;
         background-image: url('http://elemisdesign.com/img/114/1.jpg');
         width: 300px;
         height: 200px;
         margin-top: 90px;
         margin-left: 40px;
       }
       .cateogry_div2 {
         display: inline-block;
         float: none;
         background-image: url('http://elemisdesign.com/img/114/1.jpg');
         width: 300px;
         height: 200px;
         margin-top: 90px;
         margin-left: 50px;
       }
       .cateogry_div3 {
         display: inline-block;
         float: none;
         background-image: url('http://elemisdesign.com/img/114/1.jpg');
         width: 300px;
         height: 200px;
         margin-top: 90px;
         margin-left: 30px;
       }
       .cateogry_div4 {
         display: inline-block;
         float: none;
         background-image: url('http://elemisdesign.com/img/114/1.jpg');
         width: 300px;
         height: 200px;
         margin-top: 150px;
         margin-left: 40px;
       }
       .cateogry_div5 {
         display: inline-block;
         float: none;
         background-image: url('http://elemisdesign.com/img/114/1.jpg');
         width: 300px;
         height: 200px;
         margin-top: 90px;
         margin-left: 50px;
       }

<div class="cat_section">
  <div class="cateogry_div">
    <div class="sub_category">
      <img class="image_cat" src="images/watch.jpg" />
      <span>Handwatches</span>
    </div>

  </div>
  <div class="cateogry_div1">
    <div class="sub_category">
      <img class="image_cat" src="images/pocket_purse.jpg" />
      <span>Pocket</span>
      <br />
      <span>Purse</span>
    </div>

  </div>
  <div class="cateogry_div2">
    <div class="sub_category">
      <img class="image_cat" src="images/rings.jpg" />
      <span>Rings</span>
    </div>

  </div>
  <br />
  <div class="cateogry_div3">
    <div class="sub_category">
      <img class="image_cat" src="images/bangles.jpeg" />
      <span>Bangles</span>
    </div>

  </div>
  <div class="cateogry_div4">
    <div class="sub_category">
      <img class="image_cat" src="images/sunglasses.jpeg" />
      <span>Sun glasses</span>
    </div>

  </div>
  <div class="cateogry_div5">
    <div class="sub_category">
      <img class="image_cat" src="images/clutch.jpeg" />
      <span>Clutch</span>
    </div>

  </div>
</div>
&#13;
&#13;
&#13;

有任何帮助吗?

3 个答案:

答案 0 :(得分:1)

添加

vertical-align: top; 

到您的.category_div容器,然后删除

margin-top: 150px; 

来自.category_div4(放90px,与其他所有相同)

答案 1 :(得分:0)

你在口袋钱包之间使用br标签,原因是,在口袋和钱包之间移除br

<强> HTML

<div class="cateogry_div1">
 <div class="sub_category">
     <img class="image_cat" src="images/pocket_purse.jpg" /> <span>Pocket</span>  <span>Purse</span>
 </div>
</div>

JSFiddle

答案 2 :(得分:0)

这是一个不同的答案,涉及重组一些HTML&amp; CSS。获取您所使用的布局时,此代码可能会更加稳定。

这是JSFiddle of the answer

注意: 只需将http://placehold.it/170x170占位符图片替换为您自己的图片。

HTML

<div class="cat_section">
    <div class="category" id="cateogry_div">
        <div class="sub_category">
            <img class="image_cat" src="http://placehold.it/170x170" /> 
            <p>Handwatches</p>
        </div>
    </div>
    <div class="category" id="category_div1">
        <div class="sub_category">
            <img class="image_cat" src="http://placehold.it/170x170" /> 
            <p>Pocket<br />Purse</p>
        </div>
    </div>
    <div class="category" id="category_div2">
        <div class="sub_category">
            <img class="image_cat" src="http://placehold.it/170x170" /> 
            <p>Rings</p>
        </div>
    </div>
    <div class="category" id="category_div3">
        <div class="sub_category">
            <img class="image_cat" src="http://placehold.it/170x170" /> 
            <p>Bangles</p>
        </div>
    </div>
    <div class="category" id="category_div4">
        <div class="sub_category">
            <img class="image_cat" src="http://placehold.it/170x170" />
            <p>Sun glasses</p>
        </div>
    </div>
    <div class="category" id="category_div5">
        <div class="sub_category">
            <img class="image_cat" src="http://placehold.it/170x170" />
            <p>Clutch</p>
        </div>
    </div>
</div>

CSS

   .cat_section {
       text-align: center;
   }
   .category {
       display: block;
       float: left;
       background-image: url('http://elemisdesign.com/img/114/1.jpg');
       width: 300px;
       height: 200px;
       margin-top: 90px;
       margin-left: 30px;
   }
   .sub_category {
       /*margin-left: 30px;
       margin-top: 10px;*/
       padding: 10px;
   }
   .image_cat {
       float: right;
       width: 170px;
       margin-left: 10px;
   }
   .sub_category p {
       float: right;
       width: 100px;
       padding-top: 50px;
       font-size: 20px;
   }