我正在尝试将一组图像居中放置,但似乎没有任何效果。我已经尝试过使用margin: 0 auto;
,display: table;
等之类的display: inline-block;
。我不知道还能尝试什么,因为我以前从未遇到过这个问题。
<div class="main-carousel_two hideme dontHide">
<div class=" results_wrapper">
<div class="ca-item_two ca-item-14">
<div class="f-single_two">
<a data-gal="prettyPhoto[gallery2]" href="https://vimeo.com/8234379" class="mfp- iframe">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults/cle2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>txt</div>
<div class="clear"></div>
<div>Database Video</div>
</div>
</div>
<div class="f-info">text</div>
</a>
</div>
</div>
<div class="ca-item_two ca-item-15">
<div class="f-single_two">
<a data-gal="prettyPhoto[gallery2]" href="http://vimeo.com/469331" class="mfp-iframe">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/connecticut2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>text</div>
<div class="clear"></div>
<div>Database Video</div>
</div>
</div>
<div class="f-info">text</div>
</a>
</div>
</div>
<div class="ca-item_two ca-item-16">
<div class="f-single_two">
<a data-gal="prettyPhoto[gallery2]" href="https://vimeo.com/8486420" class="mfp-iframe">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults/ardl2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>txt</div>
<div class="clear"></div>
<div>Database Video</div>
</div>
</div>
<div class="f-info">text</div>
</a>
</div>
</div>
这是CSS:
.main-carousel_two
{
overflow: hidden;
width: 100%;
height:376px;
}
.results_wrapper
{
overflow: hidden;
position: absolute;
left: 2%;
}
.ca-item_two
{
position: relative;
float: left;
width: auto;
text-align: center;
}
.f-single_two{
width: 375px;
float: left;
margin: 0 15px;
position: relative;
overflow: hidden;
}
最佳答案
您的标记是非常不正确的,例如,您已将div
放在嵌入式a
标记内。
标记失败的原因:
您的position
ed div也没有placement
的left /right
并且缺少width
!
.results_wrapper {
overflow: hidden;
position: absolute;
left:0; /* missing from your css*/
right:0;/* missing from your css*/
width:350px;/* missing from your css*/
margin:0 auto;/* missing from your css*/
border:1px solid red;
}
第二个:在
ca-item_two
类中,给了不必要的float
,将其删除,以便div
在中间对齐以占据适当的空间,否则就没有将100%
宽div放在中间的感觉!working fiddle
关于html - 中心DIV CSS无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21423371/