CSS Mastery: vertically and horizontally aligning an absolutely positioned element with dynamic width based on children dimensions

Hey there! I've encountered a little issue with this code snippet: https://jsfiddle.net/jmg63s3e/1/

The code works perfectly when you resize the browser window to align the text with the image, which is exactly what I want. However, as soon as you continue to resize it, the text ends up dropping below the image, even if the width of the wrapper is much smaller than the window.

All I'm aiming for is:

  • To have the entire wrapper centered both horizontally and vertically in the browser window, without knowing its total width and height as they depend on its children.
  • row1 and row2 should not be inline; row2 must appear below row1.
  • All elements within row1 (the image and the text containing 2 spans) should be inline with each other.
  • The spinner inside row2 must also be centered within the row, although I haven't faced any issues with that in my attempts so far.

The only dynamic element in the code is the first span containing something like Player #1, as it represents the player's name and can vary in length.

If I need to make it responsive, I'll resort to media queries or adjust widths, heights, and font-sizes dynamically through JS, but at this stage, my concern lies solely with the wrapper itself. The text keeps dropping below the image despite the wrapper being narrower than the window, making it challenging to tackle the situation without a known width for the wrapper. Can anyone offer me some insights or solutions? Any suggestions would be greatly appreciated, provided they are CSS-based and exclude JavaScript. Thanks in advance!

htmlcssdynamicresponsive

Answer №1

If you're facing layout issues, consider using flexbox to resolve them.

Check out the updated fiddle with the old CSS commented out: https://jsfiddle.net/jmg63s3e/3/

To center the wrapper both horizontally and vertically, convert the parent container into a flex container by applying display: flex, justify-content: center, and align-items: center. Remember to set a height for proper alignment. Here's an example:

.trump-waiting {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  overflow: hidden;
  height: 100vh;
}

Utilize display: flex along with flex-direction: column on the wrapper to ensure proper alignment.

.trump-waiting .wrapper {
  display:flex;
  flex-direction:column;

For row1, remove the inline-block and set height while considering font resizing in text divs to prevent overflow. Use flexbox for better results:

.trump-waiting .row1 {
  display: flex;
  flex-direction: row;
  background-color: yellow;
}

Add flex-shrink:0 to .image element to prevent shrinking during resize.

To keep elements inline, apply display: flex and flex-direction: row to maintain their position on the same line.

To align the loader properly, follow the vertical/horizontal alignment method used above, add padding for spacing, and remove unnecessary CSS properties.

.trump-waiting .row2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 16px 0;

Consider using media queries to adjust font-sizes on .text spans if needed to avoid overflowing containers.

There are multiple solutions available, but give flexbox a try to see if it resolves your layout issues. For more information on flexbox, check out this helpful guide here.

EDIT: Made corrections to the CSS summary in the jsfiddle and removed redundant properties. Updated version now available.

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

Fade effects on hover with a changing background color

Here is the CSS code to be used: #onec-fourth:hover { background-color: #F36DE1; color: white; } I am looking to keep the background color and text color effects for 1 second after I move my mouse off the object (#onec-fourth). Currently, when I mov ...

htmlcss

Sending data via Ajax using the multipart/form-data format

I am encountering an issue with a script that is not working correctly. When I submit the form without using the script, everything works as expected. However, when I use the script to submit the form, only the category and description are included in the ...

jqueryhtmlajax

Ways to refresh a select element using jQuery

Can someone help me with this? <select id="apple"> <option>choose something</option> <option value="1">something 1</option> <option value=2">something 2</option> </select> If you know jQuery, could you shar ...

jqueryhtml

HTML Data conflicts

Can anyone assist me in resolving my most recent issue with HTML and DataTables? I'm currently displaying a table with just two columns (name and local). I have included the necessary files (CSS and JS): <link rel="stylesheet" type="text/css" ...

javascripthtmlcssdatatables

Why is Bootstrap 4 causing these columns to stack vertically instead of horizontally?

After upgrading to bootstrap 4, I noticed that my gallery layout has changed from horizontal in bootstrap 3 to vertical. What could have caused this sudden change? To see the issue, here is a link to a fiddle. Here are my column settings: <div class= ...

csstwitter-bootstrapbootstrap-4

Designing a hierarchical HTML dropdown menu for choosing an XML file for parsing using a jQuery script

I have successfully created a question and answer framework using Jquery and XML files. Users can choose a specific category of questions from a drop-down menu, which then displays the corresponding questions and answers from the selected XML file. While ...

jqueryhtml

The embedded video from YouTube refuses to appear behind other elements

I am facing an issue with YouTube embedded videos on my website. The problem is that these videos do not follow the z-index rules and are always displayed above all other elements on the page. I have tried: $('iframe','.video_container&apos ...

javascriptjqueryhtmlcssyoutube

Is there a way to conceal the parent element when the child element is hidden from view?

Wanting to remove the stars badge in the review section of a Shopify store when there are 0 reviews for the product. The goal is to have the badge appear automatically once a review is received. Here's the code snippet: HTML <div class="spr- ...

htmljquerycssshopifyliquid

Customizing the font color and size of the brand text in the Bootstrap 5.1.3 Navigation Bar is not allowed

I am currently working on a main page that includes a bootstrap navigation bar with a dropdown menu. I have successfully managed to display the dropdown menu and change its color using CSS. However, I encountered an issue when attempting to modify the font ...

htmlcssbootstrap-5

Adding click functionality to dynamically generated list items in jQuery and HTML

I'm encountering an issue while trying to assign click events to dynamically added HTML elements in jQuery. Despite extensive research within this community, I find myself more confused than before. Below is the snippet of code causing me trouble: v ...

javascripthtmlcss

Steps for shaping the dialog of Material-UI to fit an image

Is there a way to adjust the size of the dialog box to match that of the image? https://i.stack.imgur.com/pXtXg.png I've also tried changing the background color to transparent without success. https://i.stack.imgur.com/Hjx2x.png ...

htmlcssreactjsdialogmaterial-ui

Issue with submitting form using Jquery on select action

There seems to be an issue with this jquery code that is supposed to trigger a form submit when a drop down select is changed. It works fine on our test site, but once we move it to the live website, it breaks. Can someone help us troubleshoot and identify ...

jqueryhtmlasp-classic

Issues with loading CSS, JavaScript, and links when deploying a Spring Boot application as a WAR file in Tomcat

My Spring boot web application runs smoothly as an executable jar, but when I build it as a war and deploy it to Tomcat, the CSS and JS files fail to load. Upon further investigation, I discovered that all links are pointing to the root context path "/" I ...

javahtmlcssspringspring-boot

pressing the switch will adjust the size of the container

I am looking to implement a feature where clicking on an icon will resize a div to full screen in the browser. Below is the HTML code I have set up for this functionality, and I am open to suggestions on how to achieve this. <div> <a (click)= ...

javascriptcssangulariframe

Can the vacant space on an HTML page be determined through calculation?

Could someone please help me figure out the amount of empty space on a html page? https://i.sstatic.net/VXzbz.png Is it possible to determine the area highlighted in red using javascript? Apologies if this question seems trivial. ...

javascriptcsshtml

Certain browsers do not support CSS animation functionality

I'm currently facing an issue where only Firefox is able to animate the JSFiddle provided below. Although I've included all necessary options for different browsers, it seems like something is not configured correctly :(( FIREFOX 27: WORK ...

htmlcssanimation

Ways to avoid scrolling on a fixed element

Here is the HTML setup I have... body .top .content The issue I am facing is that when scrolling reaches the end of the ul in the .top element, the background starts to scroll. This can be quite disorienting and makes the site slow on tablets. Even ...

javascriptjqueryhtmlcss

Preventing Javascript Confirm from Canceling Form Submission

I need some help with a JavaScript function that I want to use in a form for submitting or canceling. The issue I'm facing is that it's supposed to cancel the form submission when "cancel" is clicked, but currently it only displays the warning me ...

javascriptjqueryhtmlforms

Displaying data on View is not working after navigation

I'm facing an issue where the data is not displaying on the view after routing, even though it appears in the console. Surprisingly, if I don't change the view, the data shows up. Additionally, if I call the service directly from the view, I can ...

javascriptjqueryhtmlangularjsservice

What is the best way to create an index for a user-provided value in a textbox

Looking for guidance on how to set an index to user-provided values in a textbox, append them to a table in a new row, and display that index in the first column of every row. I am unfamiliar with this type of functionality. $(document).ready(function() ...

javascriptjqueryhtmlcss