Vertical alignment of content over image is not in sync

I am attempting to center my div container .home-img-text vertically in the middle of its parent div .home-img. Despite trying various methods such as setting .home-img-text to position: absolute, relative, adding padding-top, and several others, I haven't been successful in moving it from the top of its parent div.

If you would like to see the issue for yourself, you can visit the following site:

click here

I haven't included a code snippet because the image doesn't display properly with my parallax effect.

Could someone identify what might be causing this problem?

CSS:

.home-img {
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
    vertical-align: middle;
}
.parallax-window {
    min-height: 300px;
    background: transparent;
    position: relative;
}
.home-img-text {
    position: relative;
    z-index: 99;
    color: #FFF;
    font-size: 4em;
    text-align: center;
    top: 40%;
}

HTML:

<div class="home-img">
    <div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
    <div class="home-img-text">Quality Solutions</div>
</div>

javascriptjqueryhtmlcssmargin

Answer №1

If you're looking to center a box model element vertically, here's the correct way:

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

Here is what occurs on your specific page:

.main-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
  border: 1px solid blue;
}
.container {
  height: 400px;
  border: 1px solid red;
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}
<div class="main-wrapper">
  <div class="container">
    <div class="item">Quality Solutions</div>
  </div>
</div>

In order to center .item inside of .main-wrapper instead of .container, just delete position:relative from .container.

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

When passing a parameter in a JSP page, it returns a null value

How can I display the name of my image like so? This is a simple post request from demo.jsp to itself. <form method="post" action="demo.jsp"> <input type="hidden" id="sql" name="name" value="sql"/> <input type="image" src="images/icons/ic ...

javahtmljsp

Orbiting ThreeJS object positioned at the coordinates (0,0,0)

I have set up a ThreeJS Scene similar to the image provided. The issue I'm facing is when trying to rotate Obj2 vertically around Obj1, it ends up rotating around the Z axis instead of the center point (0,0,0). My goal is for Obj2 to orbit exclusively ...

javascriptthree.js3d

Locating the value of a data attribute from a distant parent div using jQuery

How can I access the closest div from an anchor tag that has a data-id attribute without using multiple parent() methods? Even though .parent().parent().parent() works, I am trying to find a better solution. <div class="panel panel-default" data-id="@ ...

javascriptjqueryhtmljquery-selectors

Disable the borders on HTML input fields

I am looking to implement a search feature on my website. It seems that in Firefox and Internet Explorer, the search function appears fine without any unexpected borders. Firefox IE However, when viewing the search function in Chrome and Safari, there ...

csscross-browserzurb-foundation

Differences in row padding when transitioning from Bootstrap 3 to Bootstrap 4

One thing I've noticed is that when utilizing Bootstrap 3, the use of div.row would automatically create a vertical spacing between rows which was quite appealing. However, upon transitioning to Bootstrap 4, this automatic spacing seemed to disappear. ...

htmlcssangularjstwitter-bootstrap

Issue with React ChartJS rendering – Title not visibleWhen using React Chart

I'm currently using react chart js for displaying a doughnut in my component. "chart.js": "^3.7.1", "react-chartjs-2": "^4.1.0", However, I'm facing an issue where the title is not being displayed: const d ...

javascriptreactjschart.jsjsx

Refresh the page once the function has been executed

Recently, I came across a basic javascript code that I need some help with. I want to reload the page after certain elements have faded out and back in. The problem is, I'm not sure where exactly I should include the window.location.reload(); function ...

javascriptjquery

Balanced arrangement of components

As I work on my first electron app, I've created the initial layout. My goal is to have elements resize when the user adjusts the window size: The red part should change in both width and height The blue part should only adjust in height, not width ...

javascripthtmlcssreactjselectron

Display user profile pictures from Vue.js in the Laravel public directory

I have been working on implementing a commenting system and recently incorporated vue.js into my laravel project. One of the features I want to include in my comment area is displaying user profile images from the laravel public folder. However, I am u ...

javascriptphplaravelimagevue.js

Ways to solely add effect to background image without affecting text

I'm on a quest to find a way to create a CSS effect that only applies to an image, excluding the letters and buttons. I need to establish a rule in my CSS without altering the current structure. The issue arises when my code ends up applying the effec ...

htmlcssbackground-imagecss-transitions

AngularJS does not recognize the service being referenced

I keep encountering an error in AngularJS saying that the service is not defined, even though my controller and module are properly connected: application.js: var myapp=angular.module('myApp', []); myapp.service('productService', fun ...

javascriptangularjsangular-services

Using jQuery Plugin for Date Operations

I am in search of a jQuery tool that can assist me with date manipulations, such as: 1) Adding a specific number of days to a date and obtaining a new Date. 2) Determining the week of the year for a given date. 3) Calculating the number of days between two ...

jqueryjquery-pluginsjavascript

Using the transform property with the scale function causes elements positioned in the bottom right corner to vanish

Issue specific to Google Chrome and Windows 10 I'm currently working on a flipbook that adjusts content size using transform:scale() based on the user's screen size. There is also a zoom feature that allows users to adjust the scale factor. I ha ...

javascriptcssangularcss-transforms

Tips for creating a CSS transition that reverses direction

Is there a way to create a hover effect where a border appears at the bottom of an element when it is being hovered over, and then retracts back when the mouse leaves the element? I've managed to get the border to appear on hover using CSS, but I&apos ...

htmlcsscss-transitions

Using different browsers can cause web fonts to appear rough and pixelated

While exploring the issue of "jagged" or "pixelated" fonts, I made an interesting discovery. After creating a website locally and viewing it in Firefox, the font from Google Webfonts appeared flawless - almost like it was straight out of Photoshop. It wasn ...

cssfirefoxfontsfont-face

Just starting out with d3, any easy methods to learn?

As a developer with a few years of experience under my belt, I recently discovered d3 and was really impressed by its capabilities. However, it seems like d3 doesn't have the same level of popularity as jquery, making it harder to find comprehensive d ...

javascriptjquerysvgd3.js

What are the different applications of npm packages?

Is it possible to use npm packages in any Javascript runtime environment? I have experience using them in Angular and Node, but are they universally compatible across all environments? Edit: To those who downvoted this post, as a newcomer seeking assistan ...

javascriptnode.jsnpm

The EXIF-JS data is becoming inaccessible beyond the method's scope

Currently, I am in the process of developing a web application using Angular 8. My main objective is to access the exif data of an input image outside the getData method by assigning the obtained data to a global variable. However, when attempting to acces ...

javascriptangulartypescriptexif-js

Send JSON data that has been refined utilizing jQuery

I am attempting to create a filtered JSON response using jQuery following a successful GET request of the original JSON response. The initial JSON response is an array of products from our Shopify store for the specific collection page the user is viewing. ...

javascriptjqueryjsonajax

Diving into Discord.JS - Is there a way to check if a specific message content exists within an array?

I'm currently working on developing a Discord user verification bot that generates a 2048-bit key upon joining a server. This key will be crucial for verifying your account in case it gets compromised or stolen, ensuring that the new account belongs t ...

javascriptarraysnode.jsdiscorddiscord.js