尝试使用 bottom: 0 和文本对齐: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 的一侧

在您的情况下，只需将transform: translate(-100%);添加到 .mountain class 它将 .mountain 类项(img) 对齐居中。因为如果元素的位置是绝对的，文本对齐：中心将不起作用。

运行下面的代码片段并检查它。

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>

注意：避免使用位置：绝对;。

绝对定位的元素对周围发生的事情没有意识。当页面更改大小时，元素不会相对于彼此移动，而是相对于它们的容器以及您为顶部、左侧等设置的值移动。

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

相反，我们可以使用display:block和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>

尝试通过添加包装器并为其提供width: 100%;进行修改。现在在div 中，您可以右对齐以使图像显示到最后。

这是因为，position: absolute通过将元素定位到特定坐标来执行操作。对于单个元素，如果您将其定位到某个坐标，则其他规则(如text-align:center)将没有任何效果。这就是为什么，我们不是定位img，而是创建一个包装器，然后在包装器中，我们制作img以对齐中心。

.HTML

<div class="mountain">
<img src="images/mountain.png" alt="cloud-img">
</div>

.CSS

.mountain {
bottom: 0;
right: 0;
position: absolute;
width: 100%;
text-align: center;
}

相关内容

最新更新

热门标签：