https://photos.app.goo.gl/ExJFK7Ds9a67GpCA7
--- My code:
html:
<section class="s2">
<div class="box">
<div class="one"> <a href="#">Solitaire</a> </div>
<div class="two"> <p>Tacori Blooms perfectly wrap around the center stones for a seamless blanket of diamonds.</p> </div>
<div class="three"> <img src="https://www.brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e.jpg"> </div>
</div>
<div class="box">
<div class="one"> <a href="#">Solitaire</a> </div>
<div class="two"> <p>Tacori Blooms perfectly wrap around the center stones for a seamless blanket of diamonds.</p> </div>
<div class="three"> <img src="https://www.brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e.jpg"> </div>
</div>
<div class="box">
<div class="one"> <a href="#">Solitaire</a> </div>
<div class="two"> <p>Tacori Blooms perfectly wrap around the center stones for a seamless blanket of diamonds.</p> </div>
<div class="three"> <img src="https://www.brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e.jpg"> </div>
</div>
</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;
}
As you can see, I have three lines in a column: <h1, <p and <img. when I reduce the text in
or delete all the text in <p, the <h1 and <img lines no longer align with the adjacent column. Please show me how to get them aligned.
CodePudding user response:
You could set the display to grid to maintain the height like so below...
.box {
display: grid;
grid-template-rows: 40px 40px 1fr;
}
CodePudding user response:
You can add a height: 100%;
in .box
and justify-content: space-between;
or 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%;
}