I´ve got a problem with alligning 1st rectangular with other two, apparently because it contains less amount of a text. As visible in css, I´ve set exact dimensions for width and height of rectangulars. Texts will be hyperlinks to different URLs. See imgur below
(https://i.stack.imgur.com/Vyg8v.png)
.quote {
text-align: center;
margin-bottom: 30px;
}
.quote #quote-1,
#quote-2 {
font-size: large;
text-align: center;
width: 348.641px;
height: 84px;
border: 1px solid black;
display: inline-block;
padding: 30px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 0px;
}
.quote #quote-3 {
font-size: large;
text-align: center;
width: 348.641px;
height: 84px;
border: 1px solid black;
display: inline-block;
padding: 30px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 0px;
}
.quote a:link,
a:visited {
color: #000000;
background-color: transparent;
text-decoration: none;
}
.quote a:hover {
color: #6200ff;
background-color: transparent;
text-decoration: underline;
}<main>
<div class="quote">
<div class="quote" id="quote-1">
<a href="https://www.youtube.com/watch?v=ONh37dDMJYk" target="_blank">
<i>"Nobody has done anything without trying,<br />
you have to try."</i>
</a>
</div>
<div class="quote" id="quote-2">
<a href="https://youtube.com/shorts/ExAkkAbwLHY?feature=share" target="_blank"><i
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
animi consequuntur sint</i>
</a>
</div>
<div class="quote" id="quote-3">
<a href="https://youtube.com/shorts/YAelHsS0p38?feature=share" target="_blank">
<i>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
animi consequuntur sint
</i>
</a>
</div>
</div>
</main>I´ve tried to set different display values, but still got no clue.
>Solution :
This is where display: flex comes in handy, specifically it’s alignment capabilities
Update your .quote css to this:
.quote {
text-align: center;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
}