Question

我有以下html：

  <div class='container'>
    <img src="http://lorempixel.com/400/400" />
    <div class='button-left'><</div>
  </div>

我想要实现的是.button-left始终位于图像的中心，无论图像大小如何，而是div根据我的html元素定位。

这是我的css：

.container img {
  position: relative;
}
.button-left {
  position: absolute;
  top: 50%;
  background-color: red;
}

根据相对位置的图像，不应该.button-left div位置吗？

如果您想尝试现场演示，请使用JsBin： https://jsbin.com/cuwaguyiza/edit?html,css,output

Answer 1

您必须将position: relative设置为容器而不是图像。此外，我建议翻译按钮，使其完全居中。

.container {
    position: relative;
}

.button-left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Answer 2

不需要时不要使用position。

Flexbox的。

＆＃13;

.container {
  display: flex;
  align-items: center;
}

＆＃13;

<div class='container'>
  <img src="http://lorempixel.com/400/400">
  <div class='button-left'>Lorem</div>
</div>

＆＃13;

行高（如果你的文字是单行）

＆＃13;

.container img {
  vertical-align: middle;
}

.button-left {
  display: inline-block;
  line-height: 400px;
}

＆＃13;

<div class='container'>
  <img src="http://lorempixel.com/400/400"><!-- dont delete this comment
--><div class='button-left'>Lorem</div>
</div>

＆＃13;

Answer 3

    .container img {
    position: relative;
}
.button-left {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: red;

}

OR

.container img {
    position: relative;
    display: block;
    margin: 0 auto;
}

CSS - 垂直居中图像上的div

3 个答案: