I'm completely new to HTML and CSS. Everything looked perfectly aligned until I added text inside the three divs and now my images are unbalanced, even though I've set the same width and height:
Here is the code snippet:
#wrapper{
display:flex;
width: 100%;
justify-content: space-around;
}
.party{
display:inline-flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 2%;
}
.party img{
border: solid black 2px;
padding: 0.3%;
margin: 2%;
max-width: 100%;
max-height: 100%;
}
input[type = button] {
background-color: black;
padding: 10px 20px;
color: white;
margin: 2px 1px;
cursor: pointer;
}<div id="wrapper">
<div class = "party">
<img src = "Images/birthday_1.jpg">
<h3 style = "font-size: 2vw;">Party Events</h3>
<p style = "font-size: 1.5vw;"> Want flower decoration for your birthday, ceremonies, baby showers and any party events? Consult to our florist now!</p>
<input type = "button" value = " Shop Now "/>
</div>
<div class ="party">
<img src = "Images/wedding_1.jpg">
<h3 style = "font-size: 2vw;"> Wedding Events </h3>
<p style = "font-size: 1.5vw;">We offer free consultation for a bride-to-be. Call our store to make an appointment on <b>+64 85459 3943</b></p>
<input type = "button" value = " Shop Now "/>
</div>
<div class = "party">
<img src = "Images/sympathy.jpg">
<h3 style = "font-size: 2vw;">Sympathy</h3>
<center><p style = "font-size: 1.5vw;"> Fresh flowers that express heartfelt thoughts and sincere condolences. Talk to our dedicated team by phone or come in to meet with our flourist in a private consultation.</p></center>
<input type = "button" value = " Shop Now "/>
</div>
</div>This is what I want it to look like:
** Any suggestions on how to achieve this ideal result?**