在CSS的div中將文本朝向正方形底部的底部對齊
[英]Aligning text towards the bottom inside a square in a div in css
問題描述
我有一個如下所示的屏幕截圖，在其中我可以使小提琴和文字成為正方形。
我用來制作正方形的CSS代碼是：
.squares
{
display: flex;
justify-content: space-between;
align-items:center;
padding: 1rem;
background-color: rgb(238, 238, 238);
flex-wrap: wrap;
vertical-align: bottom;
}
.squares .square
{
width: 200px;
text-align: center;
height: 200px;
border-style: solid;
border-width: 3px;
border-color: rgb(145, 147, 150);
border-radius: 10px;
background-color: rgb(255, 255, 255);
}
問題陳述：
我想知道我需要在小提琴和上面提到的代碼中添加哪些CSS代碼，以便文本位於每個正方形的底部 。
我試過用display: inline-block; align-self: flex-end; display: inline-block; align-self: flex-end; 但不知何故。
2 個解決方案
解決方案1
3 已采納 2018-05-11 03:34:25
align-items: flex-end僅適用於flexbox元素，而inline-block元素是塊級的。 而不是display: block ，您只需要在子.squares .square （以及align-items:flex-end ）上尋找display: inline-flex 。
另外，請注意，如果要水平居中放置文本，而不是text-align: center ，則需要marign: 0 auto位於p元素上。
可以在以下內容中看到：
.squares { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: rgb(238, 238, 238); flex-wrap: wrap; } .squares .square { width: 200px; height: 200px; border-style: solid; border-width: 3px; border-color: rgb(145, 147, 150); border-radius: 10px; background-color: rgb(255, 255, 255); display: inline-flex; align-items: flex-end; } .squares .square p { vertical-align: text-bottom; margin: 0 auto; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Testing</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="squares"> <div class="square"> <p>Franchise Hub Hierarchy</p> </div> <div class="square"> <p>System wide user permissions</p> </div> <div class="square"> <p>Custom Corporate Branding</p> </div> <div class="square"> <p>Configurable Workflow</p> </div> <div class="square"> <p>Orders, CRM and POS</p> </div> </div> </body> </html>
解決方案2
2 2018-05-11 03:36:30
.squares .square {
display: flex;
align-items: flex-end;
justify-content: center;
}
將DIV內的文本對齊到底部
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.