Question

我使用以下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 a没有居中。我做了一些搜索，发现将元素居中的正确方法是使用css

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

我尝试了多种方法并缩小了问题是我使用position：relative或display：inline。我不确定这两个一起使用这两个问题究竟是什么问题。有没有人对它不起作用的原因有任何建议。这是我目前用于旋转木马的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);

但这也不想工作。抱歉所有文字。

Answer 1

你可以用外面的另一个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>

Answer 2

我会提出以下解决方案（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;可以实现很酷的垂直居中。如果您不需要，只需将div内的所有#projCarousel替换为a，然后丢弃每个a中最内层的{{1}}。

元素不会居中

2 个答案: