Vertically center items without absolute positions or flexbox

Question

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.

No change, I think my font size scheme is interfering with that — imstupidpleasehelp, Apr 29 '22 at 20:20
you'll need to give each element a uniform height for them to behave similarly to one another. Then you could use padding to center the text vertically. — Dylan Lee, Apr 29 '22 at 20:23
Adding height has certainly helped a lot, however the padding seems to vary on different screens even when using `rem` and `em`. — imstupidpleasehelp, Apr 29 '22 at 20:32

score 8 · Answer 1 · edited May 02 '22 at 06:07

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>

Vertically center items without absolute positions or flexbox

1 Answers1