Issue with VW units not aligning correctly in the vertical center on a responsive page

I have successfully developed a responsive webpage and am utilizing vw units to dynamically adjust the font sizes with thumb rollovers for title overlays.

The initial thumbnail (nike) features a text overlay, while the rest are .png files used for testing purposes. I am able to get the .png thumbnails to rollover to a vertical center, but encountering challenges with the font overlay. It seems like it should be a straightforward task.

.thumb-title-container
{
height:10vw;
width: 100%;
position: absolute;
top: -25vw;
left: 0px;
} overlays
cssresponsive-design

Answer №1

Whenever I need to vertically center something, I rely on the transform property because it provides consistent results and is especially useful in responsive designs. Here's an example of how you can achieve vertical centering:

HTML

<div id="parent">
  <div id="centered-child">
    <p>Some text</p>
  </div>
</div>

CSS

#parent {
  height:300px;
  width:300px;
  background-color:rgba(110,110,110,0.85)
}
#centered-child {
  text-align:center;
  position:relative;
  margin:0 auto;
  top:50%;
  translateY(-50%);  /* Browser-specific calls for translate are available */
  background-color:rgba(225,225,225,0.75);
}

You can place any content inside the child div, allowing you to use a png overlay if desired. Using relative positioning ensures that the child remains centered as the main container adjusts to different screen sizes. It's important to utilize media queries to maintain a visually appealing layout on smaller devices.

Feel free to check out this demo pen to see it in action.

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

Effortless Sidebar Navigation for populating primary content

Initially, I must confess that even though this seems like a straightforward issue, I am just as puzzled as you are by my inability to solve it independently. With no prior experience in web development, I find myself in need of using GitHub Pages to docum ...

htmljquerycssajaxiframe

Using a CSS hack to create a border cutout

The Dilemma... I am attempting to position div elements over a border, while maintaining space on both sides of each div. Take a look at the scenario: Note the gaps surrounding the black divs. I am struggling to find a solution for this issue, aside fro ...

htmlcss

Equal widths that adapt and respond to different screen sizes

Currently, I am in the process of transforming a 960grid 12col responsive design into HTML. There are three separate div elements, each with a width of 300px and a margin-right of 20px. Below is the code snippet that illustrates this: HTML <section cl ...

cssresponsive-designmedia-queriespercentagefluid-layout

Space between flex content and border increases on hover and focus effects

My code can be found at this link: https://jsfiddle.net/walshgiarrusso/dmp4c5f3/5/ Code Snippet in HTML <body onload="resize(); resizeEnd();"> <div style="margin: 0% 13.85%; width 72.3%; border-bottom:1px solid gray;"><spanstyle="visibilit ...

javascripthtmlcss

Steps to Implement CSS Background Change on Click Event

Take a look at this JSFiddle link. In the code, you will find two divs called step-wrapper, each containing three divs named step-box. When you click on a step-box, its background color changes to yellow. I have included a reset button. What I want is for ...

javascriptjqueryhtmlcss

Align a flexible div in the center horizontally

How can I horizontally center align a flexible-width div element? <div class="outer"> <div class="inner"> ...this content will grow or shrink while on items changed... </div> </div> .outer { height: 500px; ...

css

Prevent the link from stretching to cover the entire width of the page

I'm looking for a solution that can consistently restrict the clickable link area to just the text within my h2 element. The problem arises when the space to the right of the text is mistakenly included in the clickable region. Here's an example ...

htmlcss

How can one locate a particular element/style/class in the dev tools DOM while debugging in MUI v5?

Exploring the DOM and pinpointing the specific component file and style block in MUI v4 is a straightforward process: Locating a particular element/style class in MUI v4 However, in MUI v5, this functionality is no longer available, making it challenging ...

cssreactjsmaterial-uistyling

Delving into the concept of the last-child element

Looking for assistance with selecting the final EC_MyICHP_Item from an HTML structure: <div class="decorator"> <div class="EC_MyICHP_Item"> <div class="text"> <h3><a target="_blank" title="" href="#">& ...

cssjquery-selectorscss-selectors

What is the best way to implement the $anchorScroll feature in AngularJS specifically for a hidden div?

I am currently working on a web application using angularjs, and I have multiple nested div elements that correspond to selectable items. One of my main challenges is ensuring that when a user clicks on a div element, it scrolls into view correctly on ...

javascriptjqueryhtmlcssangularjs

The dynamic links in Knockout.js are unresponsive to clicks

I've been working on a new project that utilizes knockout js. The main issue I'm facing is with setting up a table to display images and information from a form, being stored in an observable array. Each image is wrapped in an anchor tag, and the ...

javascriptjqueryhtmlcssknockout.js

What sets HTML tables apart from CSS tables?

Can you explain the distinction between traditional HTML tables: <table> <tr> <td> and CSS implementation of tables? display: table display: table-row display: table-cell ...

htmlcss

Ways to extract a collection of values using a designated CSS Selector

Is there a way to quickly retrieve a list of values from a specific CSS selector? I am interested in extracting text enclosed in <strong> tags only. Currently, I am using : document.querySelectorAll("p > strong") However, the result I ...

javascriptjquerycssnodelist

URL for CSS Background-Image

While working on CSS styling for the body, I ran into a problem and was curious to understand the distinction. Initially, I tried this body { background-image: url('img/bg.png'); } However, it did not produce the desired result. http://www ...

htmlcssurlbackground-image

Arrange divs on the screen in a specific formation

I am exploring ways to position specific divs in the middle of the screen to create a pearl necklace-like shape. The desired shape is as follows: 0 0 0 0 0 0 0 0 0 0 My aim is to achieve this using jQuery on a mobile ...

javascriptjqueryhtmlcssionic-framework

Automatically adjust divs to fill available space

I've been grappling with a challenge involving my divs - how to translate my design seamlessly into the actual layout. Thus far, research and implementation have not yielded the desired results. In the link provided, you'll notice //PORTFOLIO fol ...

csshtmlwidthspace

Achieve hidden and visible elements using CSS without redundancy

Is there a way to hide a div on specific devices and show it on others without resorting to duplicating the code or using CSS hacks? This is my current approach: <div class="container"> <div class="row"> <div class="col-md-8 d-none d- ...

htmlcssbootstrap-4

What is the best way to ensure that text moves to the next line if it exceeds the boundaries of the parent div in either CSS or

I am looking to have the "remaining books count" and "remaining pens count text" automatically move to the next line below the numbers when they exceed two digits, causing an overflow in their parent div. Here is the code snippet I currently have: functi ...

javascripthtmlcssreactjs

Issue with Dynamic Theming in Ionic Framework

Currently, I am using Ionic in combination with Angular to create an App. I have introduced dynamic theming by adding two .scss files into my theme folder. In my app.scss file, I define the layout of components without colors, while all color styles are st ...

htmlcssangularionic-frameworktheming

A-Frame Visual Illumination

In my A-Frame AR scene, there is an image (transparent png) that can be moved and resized using gestures. My goal now is to adjust the brightness of this image based on the light estimated from the camera input. I have successfully implemented the light e ...

javascriptcssthree.jsaugmented-realityaframe