Centering a div vertically within another div

Can you help me insert the flight duration in the middle-left section of each blue line? I've tried some methods but haven't been successful so far.

This is the current layout:

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

Example on CodePen

HTML structure:

<span class="col-md-12 roundtrip">
  <div class="col-md-6 trip">Outbound
    <div class="flight">Los Angeles</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Chicago</div>
    <div class="connection">5hr wait</div>
    <div class="flight">Chicago</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">New York</div>
    <div class="connection">2hr wait</div>
    <div class="flight">New York</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Amsterdam</div>
  </div>
  <div class="col-md-6 trip">Inbound
    <div class="flight">Amsterdam</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Los Angeles</div>
  </div>
</span>

Styling using LESS:

.roundtrip {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
}

.trip {
  width: 100px;
  text-align: center;
  border: 1px solid black;
  margin: 0px 3px;
  display: flex;
  flex-direction: column;
  margin-right: 50%;
}

.flight {
  white-space: nowrap;
}

.flight-path {
  width: 6px;
  min-height: 85px;
  flex-grow: 1;
  align-self: center;
  background-color: #6090FF;
}

.connection {
  height: 40px;
  color: red;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flight-duration{
    margin:auto auto auto 0;
}
htmlcssless

Answer №1

One of the most useful tricks in my toolbox:

.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Here's how you can apply it to a specific scenario:

.roundtrip {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
}
.trip {
  width: 100px;
  text-align: center;
  border: 1px solid black;
  margin: 0px 3px;
  display: flex;
  flex-direction: column;
  margin-right: 50%;
}
.flight {
  white-space: nowrap;
}
.flight-path {
  width: 6px;
  min-height: 85px;
  flex-grow: 1;
  align-self: center;
  background-color: #6090FF;
  position: relative;
}
.connection {
  height: 40px;
  color: red;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flight-duration {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  
  /* Playing around with additional styling to horizontally center text */
  white-space: nowrap;
  background: rgba(255, 255, 255, .75);
  width: 81px;
  left: -38px;
  text-align: center;
}
<span class="col-md-12 roundtrip">
  <div class="col-md-6 trip">Outbound
    <div class="flight">Los Angeles</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Chicago</div>
    <div class="connection">5hr wait</div>
    <div class="flight">Chicago</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">New York</div>
    <div class="connection">2hr wait</div>
    <div class="flight">New York</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Amsterdam</div>
  </div>
  <div class="col-md-6 trip">Inbound
    <div class="flight">Amsterdam</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Los Angeles</div>
  </div>
</span>

Source

Answer №2

If you're looking to reposition the '1-30h' text:

Consider using the following CSS for your .flight-duration class:

    .flight-duration {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin:20px 0px 0px -40px;
}

The value of -40px determines the left margin of the text. Adjust this number to position the text accordingly - smaller numbers move it further left, while higher numbers move it to the right of the blue line.

Answer №3

Here is the code snippet for you to integrate:

.flight-path {
  position: relative;
}
.flight-duration{
    display: block;
    position: absolute;
    right: 6px;
    width: 46px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%)
}

I have customized your codepen with a new demo to showcase the changes http://codepen.io/antraxis/pen/jbPpQY?editors=110

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

Strategies for positioning a fixed div at the bottom of another div

I'm in the process of creating a digital restaurant menu... I decided to format it as a popup, situated within a fixed container on top of a gray transparent overlay. However, with a large number of dishes, the content exceeds the size of the containe ...

htmlcssscrollpopupcss-position

Encountered an issue while attempting to retrieve the access token from Azure using JavaScript, as the response data could

Seeking an Access token for my registered application on Azure, I decided to write some code to interact with the REST API. Here is the code snippet: <html> <head> <title>Test</title> <script src="https://ajax.google ...

javascripthtmljqueryazurepowerbi-embedded

Using Bootstrap to embed YouTube videos results in a sleek, modern design with distinctive black

When my screen is maximized on Chrome, I notice irritating black lines appearing on my responsive Youtube embeds. Unfortunately, I am unable to post an image due to lack of reputation. Specifically, when the video is paused, there is a slim black line at ...

htmlcsstwitter-bootstrapyoutube

Can Bootswatch be installed using a package manager?

I have recently launched a small asp.net core website. Right now, all JS/CSS imports are from NPM and I am using webpack to bundle them together. Instead of sticking with the standard bootstrap template, I wanted to switch to bootswatch paper, but unfortu ...

csstwitter-bootstrap-3npmbootswatch

The button is only partially visible

My HTML code for a small web app has a button that says "ok," but it's too tiny to display the text fully. I wonder if I'm missing something with the span element? How can I enlarge the button so that it's bigger and shows the entire "ok" ...

htmlcssbutton

Looking to modify the height and width of an image when it is hovered over using inline CSS

My current project involves working with a dynamic template where the HTML code is generated from the back-end using TypeScript. I am trying to implement inline CSS on hover, but despite having written the necessary code, it does not seem to work as intend ...

htmlcssangulartypescript

What is the best way to transfer information between different pages in an HTML document?

I am facing a specific requirement where I must transfer form data from one HTML page to another HTML page. The process involves a total of 5 pages, with the user entering data in the following order: 1st page: Name 2nd page: Weight 3rd page: Height 4t ...

javascripthtml

Can you explain the contrast between onsubmit="submitForm();" and onsubmit="return submitForm();"?

Is it possible that the form below is causing double submissions? <form name="myForm" action="demo_form.asp" onsubmit="submitForm();" method="post"> function submitForm(){ document.myForm.submit(); } I've noticed a bug where sometimes two ...

javascripthtml

What steps can I take to resolve the TypeError in next js where I am unable to set properties of undefined for 'className'?

I've been working on a Next.js project and I've copied some code from CodePen that is used for designing product layouts on an e-commerce website. However, I'm encountering a problem with the following error message: TypeError: Cannot set pr ...

javascriptcssreactjswebnext.js

Update the Navbar links to smoothly slide along the navigation bar as the width decreases, instead of awkwardly

When in full screen, the Navbar links are displayed horizontally. https://i.stack.imgur.com/0mOLp.png However, when the width changes, they appear like this https://i.stack.imgur.com/2ylgZ.png Is there a way to ensure they shift to the left while maint ...

jqueryhtmlcss

Is the `document.documentElement` consistently defined and always representing the HTML element?

I am looking to make changes to the <html> element using a script within the <head> section of an HTML page. My goal is to only access and modify the <html> element itself, without affecting any of its children. Should I wait for the DOM ...

javascripthtmldom

Issues with Image Placement in Internet Explorer

My cat image on my website appears significantly lower than all the other images when viewed on Internet Explorer (v11). While it looks perfect in Chrome, I cannot figure out why this discrepancy exists. For the development of this website, I utilized pred ...

htmlcssimagetwitter-bootstrap

An issue occurred during the building of the module (from ./node_modules/sass-loader/dist/cjs.js) and resulted in

Within the app directory, I've created a new folder called styles > custom > loader.scss. In the styles.scss file, I included the following import: @import "styles/custom/loader.scss"; However, upon doing so, an error message appeared ...

htmlcsssass

The calculator is experiencing issues with JavaScript functionality

Having some trouble developing a calculator using HTML5, CSS, and JavaScript. After passing my HTML and CSS through validators successfully, I encountered issues when adding JavaScript functions to enable the functionality of the buttons on the calculator. ...

javascripthtmlcss

Div modal no longer scrolling along with the rest of the page

One of the challenges I'm facing is integrating a html/css modal on my webpage, which can be accessed via this link: The issue arises when trying to utilize the main scroll bar on the page in order to navigate downwards and view the remaining content ...

csshtmlmodal-dialogfixed

Paragraph opacity adjustments can alter both the text and background opacities

Is there a way to change the opacity of only the background of a paragraph without affecting the text? When I try to adjust the opacity, it changes both the text and the background. How can I resolve this issue? HTML <div id="opener"> <p id="in ...

htmlcssopacity

Having trouble aligning elements in a single line using Bootstrap

I've been experimenting with different methods to align elements on the same line, such as using bootstrap and flexbox. However, I haven't been able to achieve the desired result. The goal is for the elements to stay on the same line even when th ...

htmlcssbootstrap-4flexbox

Positioning images within a relatively positioned div using absolute positioning

I have come across multiple discussions on this topic, but I am still struggling to make the following code snippet function correctly: .container { position: relative; width: 100%; } .left { position: absolute; left: 0px; } .right { positio ...

htmlcsscss-position

Tips for utilizing both the Element Selector and Class Selector in Jquery

I am working with a simple table that has TDs assigned either the 'PLUS' or 'MINUS' class. My goal is to use jQuery to implement functionality for collapsing all or expanding all. When the Expand All button is clicked, I need to chang ...

javascriptjquerycssjquery-selectors

Can HTML5 be used to interact with a WebApi REST service?

My main query is whether it is feasible to access a WebAPI Rest services (such as a CRUD developed by myself) using HTML5? I am troubled by the fact that whenever I attempt to use an ActionResult in any WebApiController, the framework restricts me from d ...

c#htmlrestweb-servicesasp.net-web-api