垂直居中项目，没有绝对位置或弹性盒

Question

我有三个 div，我想垂直排列，不幸的是，我找到的每个解决方案都只使用position:absolute或 flexbox 中的一个，而我不能使用其中任何一个，因为它会影响页面上我无法控制的其他内容。目前这是我的代码：

<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>

看起来像这样（没有红线），我希望所有 3 个项目都与红线对齐。任何建议将不胜感激。

Answer 1

如果你不想使用 flexbox （这会让它变得非常容易），你可以使用inline-block和vertical-align:middle; 。line-height

一个工作摘要示例

: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>