https://photos.app.goo.gl/ExJFK7Ds9a67GpCA7
---我的代碼：
html:
<section class="s2">
<div class="box">
<div class="one"> < a href="#">Solitaire<。 a> </div>
<div class="wo"> <p>Tacori Blooms完美地包裹著中心寶石，形成一個無縫的鉆石毯。 </p> </div> </ div>
<div class="three"/span>> <img src="https: //www. brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e. jpg"> </div>
</div>/span>
<div class="box">
<div class="one"> < a href="#">Solitaire< a> </div>
<div class="wo"> <p>Tacori Blooms完美地包裹著中心寶石，形成一個無縫的鉆石毯。 </p> </div> </ div>
<div class="three"/span>> <img src="https: //www. brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e. jpg"> </div>
</div>/span>
<div class="box">
<div class="one"> < a href="#">Solitaire< a> </div>
<div class="wo"> <p>Tacori Blooms完美地包裹著中心寶石，形成一個無縫的鉆石毯。 </p> </div> </ div>
<div class="three"/span>> <img src="https: //www. brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e. jpg"> </div>
</div>/span>
</section>
CSS
.s2{
height: 50vh;
color:rgb（0, 0, 0）。
background-color: rgb(231, 226, 226) 。
display: grid;
justify-items:center;
align-items: center;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
line-height: 20px;
}
.box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 40px;
width: fit-content;
}
.box a{
text-decoration: none;
font-size: 30px;
margin-bottom: 20px;
}
.box img{
height: 150px;
margin: 20px auto;
border: 1px black solid;
border-radius: 20px 20px;
}
如你所見，我在一列中有三行：<h1、<p和<img。當我減少
中的文字或洗掉<p中的所有文字時，<h1和<img行不再與相鄰列對齊。請告訴我如何使它們對齊。
uj5u.com熱心網友回復：
你可以將顯示方式設定為網格來保持高度，就像下面這樣......
。span class="hljs-selector-class">.box {
display: grid;
grid-template-rows: 40px 40px 1fr;
}uj5u.com熱心網友回復：
你可以在.box中添加height: 100%;和justify-content: space-between;或justify-content: space-around;
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-top: 40px;
width: fit-content;
height: 100%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/321893.html
標籤：