元素不会居中

我创建了一个旋转木马与下面的HTML代码元素不会居中

<div id='projCarousel'> 
    <div class='active'> 
     <a href='http://www.#.com' target='_blank'>#</a> 
     <img id='projImg' src='img/#.png' class='active' /> 
    </div> 
    <div> 
     <a href='http://www.#.com' target='_blank'>#</a> 
     <img id='projImg' src='img/#.png' /> 
    </div> 
</div>

我注意到#projCarousel DIV一个没有中心。我做了一些搜索，发现到一个居中的元素正确的方法是用CSS

#projCarousel div a { 
    margin-left:auto; 
    margin-right:auto; 
}

我已经试过许多东西，并缩小了，这个问题是不是支持我使用的位置是：相对或显示：一致。我不确定像这样一起使用这两者的确切问题。有没有人有任何建议，为什么它不工作。这是我目前用于传送带的CSS。

#projCarousel { 
    margin: 0px; 
    padding: 0px; 
    position: absolute; 
    min-height: 100%; 
    min-width:100%; 
} 

#projImg { 
width:100%; 
height: auto; 
margin-top: -24px; 
} 

#projCarousel div { 
padding: 0px; 
margin: 0px; 
position:absolute; 
min-width:100%; 
min-height: 100% 
} 

#projCarousel div a { 
    position: relative; 
    top: 100px; 
    left: 44.5%; 
    padding: 20px; 
    border: 10px solid rgba(255, 255, 255, .6); 
    font-size: 20px;  
    display: inline; 
    text-decoration: none; 
    text-align: center; 
width: 200px; 
}

在一个侧面说明，我想这可能是更容易只是删除标签干脆只使用

background-image:url(img/#.png);

但并不希望任何工作。对不起所有的文字。

来源

2014-05-21 Mike F

你能描述一下你想用这个传送带实现什么吗？ – Sheraff

它只是我工作过的项目的图像传送带。它会在两个div之间自动循环，并将z-index添加到当前处于活动状态的任何一个。 –

所以'#projCarousel div'应该互相覆盖？ – Sheraff

您可以用另一个DIV外面收拾它使projCarousel中心

<div style='width:100%; margin:0 auto'> 

    <div id='projCarousel'> 
     <div class='active'> 
     <a href='http://www.#.com' target='_blank'>#</a> 
     <img id='projImg' src='img/#.png' class='active'/> 
     </div> 

     <div> 
     <a href='http://www.#.com' target='_blank'>#</a> 
     <img id='projImg' src='img/#.png' /> 
     </div> 
    </div> 

    </div>

来源

2014-05-21 01:51:52

将锚定标记的中心？ –

它会中心的一切是封面，你的意思是什么？ –

嵌套divs内的锚点。他们不集中 –

我想提出以下解决方案（的jsfiddle：http://jsfiddle.net/9KE8r/）：

HTML

<div id="projCarousel"> 
    <div style="background-image: url(http://placehold.it/350x150);"> 
     <a>#</a> 
    </div> 
    <div style="background-image: url(http://placehold.it/200x150);"> 
     <a>#</a> 
    </div> 
</div>

CSS

#projCarousel{ 
    display: block; 
    position: relative; 
    box-shadow: 0 0 1px blue; 
} 
#projCarousel div{ 
    display: table; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 300px; 
    background-size: cover; 
    background-position: 50% 50%; 
} 
#projCarousel div:first-child{ 
    position: relative; 
} 
#projCarousel div a{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}

个

一些细节：

background-image被定义的内联（即。在HTML中），以便它可以很容易地为每个div不同。我不真的推荐使用min-height:100%。在这里，我用固定的px高度去了。但通过这种解决方案，您的#projCarousel无论如何都会占用您放入其中的任何高度。
在父母上使用display:table;，在孩子上使用display:table-cell;允许冷静垂直居中。如果你不需要，你可以用a代替#projCarousel里面的所有div，并丢弃每个里面最里面的a。

来源

2014-05-21 02:18:23 Sheraff

元素不会居中

回答

相关问题