嘗試使用bottom：0和text-align：center將div中的圖像居中和底部：居中將其發送到div的底角
[英]Trying to center and bottom an image inside a div using bottom: 0 and text-align: center sends it to the bottom corner of the div
問題描述
我有一個已經通過使用text-align: center;居中的圖像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的一側上面的代碼
2 個解決方案
解決方案1
2 已采納 2019-08-01 04:07:20
在您的情況下，只需添加transform: translate(-100%); 到.mountain類它將.mountain類item（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>
絕對定位的元素對它們周圍發生的事情一無所知。 當頁面更改大小時，元素不會相對移動，而是相對於它們的容器以及您為頂部，左側等設置的值。
要了解更多信息： https : //www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/
相反，我們可以使用
display:block和margin:auto 。
display:block block-將元素顯示為塊元素(like <p>,<h2>) 。 它從新的一行開始，並占據整個寬度
基本上p，h2將display:block屬性，並且在主體中添加了text-align:center; 因此p，h2將占據整個寬度並對齊中心，而img將沒有display:block屬性that屬性。 因此您必須明確地添加它。
要使圖像居中對齊，我們可以簡單地使用margin:auto給img標簽。然后將.top容器的高度更改為auto，以便根據屏幕尺寸自動設置高度。
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>
解決方案2
0 2019-08-01 02:13:40
嘗試通過添加包裝並賦予其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;
}
將 div 內的文本與底部中心對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.