Vertically center items without absolute positions or flexbox [duplicate] - html

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 10 months ago.
I have three divs that I would like to line up vertically, unfortunately every solution I find only uses either position:absolute or flexbox and I cannot use either because it will affect other things on the page that I do not have control over.
At the moment here is my code:
<div
class="search-wrapper text-center "
style=""
>
<div
class="col-md-7 perfect-vacation white "
style="font-family:lora;letter-spacing:0px;font-style:italic;font-size:clamp(1.3rem, 3.9vw, 2.9em);white-space:nowrap;"
>
<div> find your perfect cruise vacation</div>
</div>
<div id="search-cruises" class=" col-md-2" style="">
<a
href="/search-cruise/cruises"
class="green-btn button"
data-track="search-track"
data-track-id="search-widget"
style="background:#6D9D5B;padding:10px;
border-color:#6D9D5B;font-size:clamp(1.1em, 1vw, 1.4em);white-space:nowrap;"
>
Search Cruises
</a>
</div>
<div class="col-md-3" style="">
<a
class="white recent-cruise "
style="font-family:Roboto;white-space:nowrap;font-size:clamp(.8em, 1vw, 1.4em);color:white;overflow:visible;"
>
See Recently Viewed Cruises
</a>
</div>
</div>
Which looks like this (without the red line) I am looking to get all 3 items to line up with that red line. Any suggestions would be very much appreciated.

Answer 1

If you don't want to use flexbox (which would make it very easy) you can use inline-block with vertical-align:middle; and line-height.
a working abstract example
:root {
--nav-height: 100px;
}
.col {
text-align: center;
background-color: gray;
height: var(--nav-height);
}
.col > div {
display: inline-block;
vertical-align:middle;
line-height:var(--nav-height);
width: 25%;
background: lightgreen;
}
.d1 {
font-size:30px;
}
.d2 {
font-size:10px;
}
.d3 {
font-size:50px;
}
<div class="col">
<div class="d1">text 1</div>
<div class="d2">text 2</div>
<div class="d3">text 3</div>
</div>