我正在尝试将一组图像居中放置,但似乎没有任何效果。我已经尝试过使用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也没有placementleft /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/

10-12 12:58
查看更多