时间戳

首页 > 解决方案 > 尝试使用 bottom: 0 和 text-align: center 将 div 内的图像居中和底部发送到 div 的底角

html - 尝试使用 bottom: 0 和 text-align: center 将 div 内的图像居中和底部发送到 div 的底角

问题描述

我有一个已经通过text-align: center;在正文中使用而居中的图像，我试图将图像放置在其包含 div 的底部，但是使用以下代码，图像被放置在底部，但它发送到 div 的角落及其不再居中，像这样：

图像不再居中

我有以下 HTML

body{
  margin: 0;
  font-family: "Bebas W05 Regular",arial, sans-serif;
  text-align: center;
  letter-spacing: 1px;
  word-spacing: 3px;
}

.top-container{
    background-color: #f67280;
    position: relative;
    padding: 100px;
    height: 300px;
}


.mountain {

  bottom: 0;
  position: absolute;
  /*transform: translate(-50%)*/

}
<div class="top-container">
  <img class="top-cloud" src="images/cloud.png" alt="cloud-img">
  <h1>I´m Andres</h1>
  <p>A JAVA <span class="pro">pro</span>grammer and full stack web developer</p>
  <img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
  <img class="mountain" src="images/mountain.png" alt="cloud-img">
</div>

我通过在.mountain的css属性中使用找到了解决方案及其解决方案transform: translate(-50%)，但我不明白为什么当我使用上面的代码时图像不再居中并发送到div的一侧

标签： htmlcss

解决方案

在您的情况下，只需添加 transform: translate(-100%);到 .mountain 类它会将 .mountain 类项目（img）居中对齐。因为如果元素的位置是绝对的， text-align:center 将不起作用。

运行以下代码段并检查它。

body{
  margin: 0;
  font-family: "Bebas W05 Regular",arial, sans-serif;
  text-align: center;
  letter-spacing: 1px;
  word-spacing: 3px;
}

.top-container{
    background-color: #f67280;
    position: relative;
    padding:100px;
    height: 300px;
}

.mountain {
  bottom: 0;
  position: absolute;
  transform: translate(-100%);

}
<body>
<div class="top-container">
  <img class="top-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <h1>I´m Andres</h1>
  <p>A JAVA <span class="pro">pro</span>grammer and full stack web developer</p>
  <img class="bottom-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <img class="mountain" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
</div>
</body>
注意：避免使用位置：绝对；。

绝对定位的元素不知道周围发生了什么。当页面改变大小时，元素不会相对于彼此移动，而是相对于它们的容器以及您为 top、left 等设置的值移动。

了解更多：https ://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/

相反，我们可以使用display:blockand margin:auto。

display:block- 将元素显示为块元素(like <p>,<h2>)。它从新的一行开始，占据整个宽度

基本上 p,h2 将display:block具有属性并且在正文中您已添加text-align:center;因此 p,h2 将占据整个宽度并对齐中心，其中 img 将不具有display:block该属性的属性。所以你必须明确地添加它。

要在中心对齐图像，我们可以简单地使用margin:auto给 img 标签。并将高度更改为 .top-container 为自动，这样高度将根据屏幕尺寸自动设置。

img{
display:block;
 margin:auto;
}

查看我的代码：

body{
  margin: 0;
  font-family: "Bebas W05 Regular",arial, sans-serif;
  letter-spacing: 1px;
  text-align:center;
  word-spacing: 3px;
}

.top-container{
    background-color: #f67280;
    padding: 100px;
    height: auto;
}

img{
display:block;
margin:auto;
}
<body>
<div class="top-container">
  <img class="top-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <h1>I´m Andres</h1>
  <p>A JAVA <span class="pro">pro</span>grammer and full stack web developer</p>
  <img class="bottom-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <img class="mountain" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
</div>
</body>

使用的替代解决方案display:flex;。

body{
  margin: 0;
  font-family: "Bebas W05 Regular",arial, sans-serif;
  letter-spacing: 1px;
  word-spacing: 3px;
}
.top-container{
    background-color: #f67280;
    padding: 100px;   
    display:flex;
    align-items:center;
    flex-direction:column;
    height: auto;
}
<body>
<div class="top-container">
  <img class="top-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img" height="100" width="100">
  <h1>I´m Andres</h1>
  <p>A JAVA <span class="pro">pro</span>grammer and full stack web developer</p>
  <img class="mountain" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img" height="100" width="100">  
  
    <img  src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img" height="100" width="100"/>  
</div>
</body>

推荐阅读