css图像定位中心

Question

我有定位图像的问题

<div class="foto img-thumbnail">
  <img class="img-thumbnail tengah" src="member/37/foto_profile/profile37.png">
</div>

css文件

.foto {
background-image: url('member/37/foto_profile/large.jpeg');
height: 300px;
background-repeat: no-repeat;
background-size:cover;
background-position: 
center center;
width: 100%;
}
.tengah {
position: absolute;
}

绿色 = 类 tengah

RED = 类 照片

我想要div的图像（RED）定位中心

当我改变css时

.tengah {
left: 50%;
top: 50%;
position: absolute;
}

它返回图像的中心

任何人都可以帮助我吗？

之前感谢：）

Answer 1

我认为你在讨论.tengah中.foto div的居中问题。

如果是，那么你需要：

.foto {
  background-image: url('member/37/foto_profile/large.jpeg');
  height: 300px;
  background-repeat: no-repeat;
  background-size:cover;
  background-position: 
  center center;
  width: 100%;
  position: relative; /* ADDED */
}

.tengah {
  left: 50%;
  top: 50%;
  position: absolute;
  margin-top: -30px; /* ADDED */
  margin-left: -30px; /* ADDED */
}

边距是您想要居中的<div>的宽度和高度的一半。

Answer 2

一种适应不同尺寸屏幕的清洁方法是通过为.tengah类左右设置自动边距来完全避免“位置：绝对”：

.tengah {
   position: relative;
   margin-left: auto;
   margin-right: auto;
   top: 50%;
}

此样式类将自动居中image / div。如果不使用“vertical-align”，可以根据图像长度稍微调整“顶部”。