Question

我试图将图像垂直居中放在容器div中，但它没有按预期工作。

容器div还包含其他图像，这里是我的html：

  <div id="first-part">
    <div id="slider">
       <img src="img/1.jpg" class="slider_image" id="1"/>
       <img src="img/2.jpg" class="slider_image" id="2"/>
       <img src="img/3.jpg" class="slider_image" id="3"/>
       <img src="img/next.png" id="next"/>
    </div>
  </div>

我想把容器中的 #next div放在中心这里是我的CSS：

body,#first-part,#slider{
  padding:0px;
  margin:0px;
}

.slider_image{
   width:100%;
   position:relative;
}

#slider{
  height:660px;
  overflow:hidden;
  display:inline-block;
  white-space:nowrap;
  position:relative;
}  

#next{
  position: relative;
  top: 50%;
  height: 6em;
  margin-top: -3em;
  width:80px;
}

我尝试将位置更改为绝对值#next ，但我尝试使用的两种情况下的图像都不会出现 #next ：

#next{
  position:relative;
  width:80px;
  top:0px;
  bottom:0px;
  left:2px;
}

我不会在这里更改其他css是JsFiddle

Answer 1

将此代码用于垂直中心

#next {
 position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

Answer 2

试试这个：

#next{
  position: absolute;
  height: 6em;
  width:80px;
  z-index: 5;
  margin:auto;
  left:0;
  right:0;
  top:50%;
}

http://jsfiddle.net/bzwhpy8g/2/

Answer 3

由于你给#slider一个确切的高度，我认为使用像“top：280px;”之类的东西更容易调整#next。玩这个号码让它“看起来”正确。随着利润率的下降，其他项目的静态等等......数学并不需要有意义。

有一种更精确的方法可以做到这一点，但它涉及进行一些其他的CSS更改。

div内垂直的中心图像不起作用

3 个答案: