Achieve vertical centering of items without relying on absolute positioning or flexbox

I am struggling to align three divs vertically without using position:absolute or flexbox, as they will affect other elements on the page that I cannot control. Here is the current code snippet:

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

https://i.sstatic.net/TGpaU.png

The current layout looks like this (without the red line). I need all three items to be aligned with the red line. Any suggestions are welcome!

htmlcss

Answer №1

If you prefer not to utilize flexbox (which would simplify things), an alternative approach is using inline-block along with vertical-align:middle; and line-height.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to locate the element using xpath on a JavaScript enabled website in Selenium with Chrome

I have been attempting to extract data from a website that utilizes Javascript. Despite researching similar inquiries on xpath in Selenium, I have not found a solution. I initially tried using requests, but as the JavaScript doesn't load completely, I ...

javascripthtmlpython-3.xseleniumxpath

Is there a way to increase the total of each row by two when a button is clicked?

Looking to enhance the sum of each row by two depending on whether a button is clicked. HTML: <table> <tr> <td> <input type="checkbox" class="prof" name="prof" value="0"> <input class=&quo ...

javascripthtmljquerybuttonsum

Steps to avoid HTML encoding the ' character in Next.js _document.js file

Currently, I am working on integrating VWO into my website by following the steps mentioned here. I have included the VWO script tag within a NextJs Head tag as shown below: <Head> <script type='text/javascript' id='vwoC ...

htmlnext.jsvwo

How can I change the text color in a QTextBrowser using HTML in PyQt?

I've been attempting to customize the font color of HTML text within a created QTextBrowser. While I have successfully used basic HTML commands to adjust paragraphs and change font size, I am facing difficulties with setting font color. Below is the ...

htmlcsspyqtpyqt4qtextbrowser

Guide to Aligning col-md-3 to the Right Side in HTML Bootstrap 4

Is there a way to align one div on the right side, but within the same row? I am trying to place the value 172.21 on the right side of the row. Check out the screenshot here: https://i.sstatic.net/eg3K5.png Here is the HTML: <div class="row" ...

htmlcssbootstrap-4

Difficulty in arranging DIVs on a flat surface

As a user running Win XP with Firefox, IE, and Google Chrome browsers, I'm encountering an issue where I can't seem to align two DIVs on the same horizontal plane. My goal is to have the left div occupy 24% of the screen width while the right div ...

htmlcss

Using jQuery to create two identical widgets

Just starting out with JQuery and had a question about a specific problem I'm facing: Imagine you want to include 2 textboxes with datepickers on an HTML page using jQuery UI. Since jQuery works based on "ID" rather than "Class", the following code w ...

htmljquery-uijquery-ui-datepicker

Developing web applications using a combination of PHP, MySQL, and

I am in need of creating an HTML form that functions as CRUD. This form should be able to record inputs such as "row_number", "channel_name", and "ip_address". It will store all the data in a MySQL table using the "ORDER BY row_number" function. The form i ...

javascriptphphtml

"Why is my Python Selenium code returning an empty list when trying to find elements by xpath

Currently, I am attempting to extract a table from a password-protected website using Firefox. In order to access the table, I must first select the product, input the dates for the start and end, and complete the verification process by sliding. My goal i ...

pythonhtmlseleniumweb-scraping

CakePHP does not recognize the input type "number" in forms

My goal is to create a form field that only accepts numbers as input. However, when I attempt the following code in CakePHP: <?php echo $this->Form->input('aht',array( 'label' => 'AHT', 'type' = ...

htmlcakephp-2.0formshtml-input

Apply a class to every group of x elements

In order to style the products displayed on a product list page, I have an unknown amount of divs, with each row containing 4 divs for individual products. My goal is to apply a specific CSS class to the first div in each row, then another class to the sec ...

css

Height that is determined in real-time

I am attempting to adjust the height of a div based on the size of the screen. Within this div, there is a calendar that contains multiple lines of content, which can be displayed or hidden based on user preference. The height of the calendar is not fixed, ...

css

What can you do with a 2D array and getElementsByTagName?

My current challenge involves trying to utilize JavaScript to access table cells by using the getElementsByTagName method. The end goal is to compare each cell in the array to a specific value and then change the background color of that cell based on the ...

javascripthtmlgetelementsbytagname

Booking form pop-up appearing beneath the section

Currently, I am in the process of adding a booking form to the main page of . However, I seem to be encountering an issue where a popup appears below the section it is supposed to open within when selecting the number of persons. Despite adjusting the z ...

htmlcsswordpressdivi

What is the best way to manage photos from your phone without having to upload them online?

I'm currently developing an application using AngularJS/Javascript, HTML, and CSS within a cloud-based environment on c9.io. My next task is to create and test an app that can access the phone's photo album, apply filters to images, and I'm ...

javascripthtmlcssangularjsimage-processing

Can you explain the steps to implement this feature in a modal window using jQuery?

My HTML list contains a bunch of li elements. ul li img .det li I am looking to create a modal popup that appears when I click on something. I want this modal popup to have previous and next buttons, preferably implemented using jQuery. I have alr ...

javascripthtmlcss

The content momentarily flashes on the page during loading even though it is not visible, and unfortunately, the ng-cloak directive does not seem to function properly in Firefox

<div ng-show="IsExists" ng-cloak> <span>The value is present</span> </div> After that, I included the following lines in my app.css file However, the initial flickering of the ng-show block persists [ng\:cloak], [ng-cloak], ...

javascriptcssangularjshtmlangular-directive

Creating a CSS template for organizing sidebar and footer divisions on a webpage

I am facing an issue with the layout of my website. I have a container that is positioned relatively and houses various divs for header, sidebar, main-content, and footer. The problem lies with the sidebar and footer components. The sidebar has been posit ...

css

Tips for positioning a div element at the center in ASP.NET

I have written the following code snippet: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit ...

htmlcss

Div with sidebar that sticks

I am currently working on setting up a website with a sticky sidebar. If you would like to see the page, click this link: On a specific subpage of the site, I am attempting to make an image Validator sticky, but unfortunately, it's not functioning a ...

javascriptjqueryhtmlcss