Question

body {
  text-align: center;
  margin: 0;
}

.top_container {
  background-color: #eaf6f6;
  height: 100vh;
  width: auto;
  position: relative;
}

.mountain {
  position: absolute;
  bottom: 0;
  margin-left: auto;
}

.cloud {
  position: absolute;
}

h1 {
  margin-top: 0;
}

<body>
  <div class="top_container">
    <img class="cloud" src="https://via.placeholder.com/150/0000FF/808080/" alt="cloud_picture">
    <h1> TEXT </h1>
    <h2>a <span class="">TEXT</span>TEXT</h2>
    <img class="cloud" src="https://via.placeholder.com/150/FFFF00/000000"
 alt="cloud_picture">
    <img class="mountain" src="https://via.placeholder.com/150/FF0000/FFFFFF" alt="mountain_picture">
  </div>
  <h1>LALALALALA</h>
</body>

大家好，

我想将山图像定位在div的底部并水平居中。

当我将position设置为div底部的绝对位置时，似乎文本对齐不起作用。我还尝试过left:50%;居中，但这也没有改变。

Answer 1

您的代码：

.mountain{
  position: absolute;
  bottom:0;
  margin-left: auto;
}

示例工作解决方案：

.mountain{
  position: absolute;
  bottom:0;
  right: 50%;
  transform: translateX(50%);
}

这是示例link

Answer 2

将父项显示为flex并添加一个证明内容规则。

    .top_container{
      display: flex;
      justify-content: center;
      background-color: #eaf6f6;
      height: 100vh;
      width: auto;
      position: relative;
    
    }

笔： https://codepen.io/richiegarcia/pen/wvGNWdj

Answer 3

这是使用Flex Magic的一种更优雅的方式

    .top_container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .mountain {
      margin-top: auto;
    }

jsFiddle

如何将img元素放置在其父元素的底部并水平居中

3 个答案: