css - 元素不会居中

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>