Aligning elements in the center vertically using absolute positioning for multiple elements

I have been experimenting with a method to vertically center an element in a div that has unknown height.

You can check out the approach I used here:

In my case, I am working with anchor tags and this solution was particularly helpful due to the position relative issue.

If you want more information on using position absolute vs position relative for vertical alignment, you can refer to this link: When to use position absolute vs position relative when vertically aligning with css

One problem I encountered was overlapping elements when using position:absolute, especially because I had one element right next to another.

Is there any alternative method to address this without resorting to flexbox?

Here is the HTML structure:

<div class"parent-container">
  <a href="">Some content</a>
  <a href=""><img src""></a>
</div>

And here is the CSS code:

.parent-container {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parent-container a {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}

Answer №1

Align the children as inline-block elements with vertical-align:middle. No need to use positioning.

a {
  vertical-align: middle;
  display: inline-block;
}
.parent-container {
  text-align: center;
  background:palegoldenrod
}
<div class="parent-container">
  <a href="">Some content</a>
  <a href="">
    <img src="http://www.fillmurray.com/140/100">
  </a>
</div>

If the parent container is taller than the content, you can utilize a pseudo-element.

a {
  display: inline-block;
  vertical-align: middle;
}
.parent-container {
  text-align: center;
  height: 150px;
  background: pink;
}
.parent-container::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-right: -0.25em;
  /* Adjusts for spacing */
}
<div class="parent-container">
  <a href="">Some content</a>
  <a href="">
    <img src="http://www.fillmurray.com/140/100">
  </a>
</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

Retrieve the data from an input field in Selenium automation

Despite the text being visible in the input Text Box, I am encountering difficulties capturing it from the html DOM. I attempted to use getAttribute('value'), however, since the value attribute is not present, this method proved unsuccessful. Sim ...

"Adding a large amount of HTML using .append() is causing slow performance in Internet Explorer 10

Lately, I've been encountering some challenges with jQuery code in my workplace. Unfortunately, I don't have the exact code on hand at the moment, but I'll do my best to provide pseudo-code. Being relatively new to JavaScript, there may be e ...

The issue of multiple clicks being triggered when opening a dialog box: comparing the trigger and the click events

When I right-click on a jTree list item, a dialog box pops up for editing. The dialog box has a table with a list of items similar to the original one selected. The first time I open the dialog box, the selected item is highlighted and its information popu ...

When clicked, the onClick feature will reduce the number each time instead of initiating the timer

Currently, I am working on a meditation application using React. As a starting point, I implemented a 25-minute countdown feature. The challenge I am facing is that the timer starts counting down each time the button is clicked, rather than triggering it ...

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

I'm encountering an issue with a pop-up video player that is triggered by an "onClick" event in HTML elements. The problem arises when there are multiple video players on the same page - in Firefox, the first video loads at the bottom of the page, req ...

Export Image as Json File

I am currently working on creating a browser extension and I am trying to figure out how to save images locally. My plan is to store the images in a json file, but I'm feeling quite lost on how to accomplish this. Below is the code I have so far, alth ...

What is the best way to remove query string parameters prior to running a function when a button is clicked?

I'm facing an issue trying to implement a button that filters events based on their tags. The problem arises when the tag value in the query string parameter does not clear when other buttons are clicked. Instead, the new filter tag value adds up with ...

Is it possible to achieve 100% screen height by combining a fixed height div with a stretchy height div?

I have a design concept that I'm trying to bring to life. I'm struggling with figuring out how to add another "stretchy div" to the layout. I want this second div to expand to fill all remaining vertical space on the screen without causing it to ...

Login form with AJAX for seamless submission without page refresh

I found a helpful tutorial on creating a login form at This tutorial focuses on authenticating against our LDAP server. However, I am running into an issue with the following line of code: success: function(){ $('form#submit').hide(function() ...

Styling div elements within other div elements using CSS

I am currently working on creating a layout with three divs, each containing an image. The challenge is to set the height of the first div (top) to 10% of the screen size, the second (middle) to 60%, and the third (bottom) to 30%. I want these divs to main ...

How can I use jQuery to add styling to my menu options?

Looking to customize my menu items: <ul> <li class="static"> <a class="static menu-item" href="/mySites/AboutUs">About Us</a> </li> <li class="static"> <a class="static-menu-item" href="/m ...

Is it possible to run a query directly from HTML code?

I am trying to retrieve data from my table that includes two columns: Judul, Isi. <head><link type="text/css" rel="stylesheet" href="addnewpage.css"/</head> <body> <?php $k = mysqli_connect("local ...

Help with enabling the recognition of backspace key in JavaScript?

My current JavaScript is almost perfect but missing one key element. The form has two fields that are disabled when the user fills it out. <label>Can you drive? </label> <input type="booleam" id="drive" disabled><br> <label>W ...

Unable to display images - PhoneGap

I am experiencing an issue where images that are being dynamically added to my HTML display correctly in Firefox, but on all the Android devices I have tested, the images do not appear. Instead, a box with their alt text is shown. HTML: <div class="ui ...

Enhancing the bottom border of an unordered list when incorporating styled bullets

I have a list with some items. I used a CSS trick to style the bullet as a circle. However, I would like to add a border underneath each item to separate them. Because I removed the default bullets using list-style: none, the "bullet" is positioned -1em, ...

Material UI drop down select position placement

Having an issue with the dropdown position when using select from material UI. It's not appearing in the correct location. Desired Dropdown Position: https://i.sstatic.net/arRIF.png Current Dropdown Position: when opening the dropdown https://i. ...

The tab content refuses to show up in its designated fixed location

I've been working on creating a responsive tab system that functions as an accordion on smaller mobile devices, inspired by this example. I've made great progress and I'm almost where I want to be, but for some reason, the active tab content ...

The tooltip in Bootstrap v2.3.2 is causing words to be cut right in half

The tooltip plugin is set up like this: $("#id").tooltip({ placement: 'top', trigger: 'hover', html: true, container: 'body' }); Is there a way to prevent this from happening? Appreciate any insights. ...

Code snippet for replacing text enclosed between two tags using regex in PHP programming language

While I am not an expert in regex, I am attempting to develop a code inspired by examples I have come across. My goal is to replace instances of the string <li> with <li class="ingredient"> within a WordPress table. However, this replacement mu ...

Adjusting the color of text based on the fulfillment of a condition

Is there a way to change the text color of a variable based on its value in PHP? For example, if the $status is set to admin, can we display it in red when echoed out using <h3>Status: <?php echo $status; ?></h3>? I'm not quite sure ...