Center div position

问题

I try to display images in six separate div's . All div are placed with correct position .but center div position look likes one is going upward and other center div is going downward i also post image so you better to understand what i trying to say and also i post HTML and CSS code .. image

       .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>

Any help ?

回答1:

Add

vertical-align: top; 

to your .category_div containers and remove

margin-top: 150px; 

from .category_div4 (put 90px, the same as all the rest)

回答2:

You are using br tag between span of pocket purse, that's the reason, Remove br between span of pocket and purse

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

回答3:

Here's a different answer that involves restructuring some of the HTML & CSS. This code might be a little more stable for getting the layout you are after.

Here is a JSFiddle of the answer.

Note: Just replace the http://placehold.it/170x170 placeholder images with your own.

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;
   }

来源：https://stackoverflow.com/questions/32371990/center-div-position