中心div位置 [英] Center div position
本文介绍了中心div位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试在六个独立的div中显示图像。所有div放置在正确的位置。但中心div位置看起来像一个是向上和其他中心div正在向下我也post图像，所以你更好地了解我想说什么，也是我后HTML和CSS代码.. < a href =http://oi61.tinypic.com/1tagdv.jpg =nofollow>图片
.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_catsrc =images / watch.jpg/> < span>手表< / span> < / div> < / div> < div class =cateogry_div1> < div class =sub_category> < img class =image_catsrc =images / pocket_purse.jpg/> < span> Pocket< / span> < br /> < span>钱包< / span> < / div> < / div> < div class =cateogry_div2> < div class =sub_category> < img class =image_catsrc =图像/ rings.jpg/> < span> Rings< / span> < / div> < / div> < br /> < div class =cateogry_div3> < div class =sub_category> < img class =image_catsrc =images / bangles.jpeg/> < span>手镯< / span> < / div> < / div> < div class =cateogry_div4> < div class =sub_category> < img class =image_catsrc =images / sunglasses.jpeg/> < span>太阳眼镜< / span> < / div> < / div> < div class =cateogry_div5> < div class =sub_category> < img class =image_catsrc =images / clutch.jpeg/> < span>离合器< / span> < / div> < / div>< / div>
解决方案
添加
vertical-align：top;容器 remove margin-top：150px;
从 .category_div4 与所有其余的相同）
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 ?
解决方案 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)
这篇关于中心div位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
