<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
align-items: center; /* 所有子元素在垂直方向居中 */
height: 300px;
background-color: #f0f0f0; /* 淺灰色背景 */
border: 2px solid #333; /* 深色邊框 */
padding: 10px; /* 內邊距 */
}
.item {
background-color: #4CAF50; /* 綠色背景 */
color: white;
padding: 20px;
border: 2px solid #fff;
margin: 5px;
font-size: 18px;
}
.item-special {
align-self: flex-end; /* 這個元素會在容器底部對齊 */
background-color: #FF5722; /* 橙色背景 */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.