Recently, I attempted to vertically center a div on a page with a height of 100vh.
The div has a height of 84px, so I tried using the following CSS:
margin-top: calc(50% - 42px);
Unfortunately, it appears that the browser always considers the width of the outer div instead of its height (100vh). Is there a way to calculate the percentage based on the height of the containing element rather than its width?
It appears that the browser consistently follows the width of the outer div
Absolutely. Refer to the official specification for more details:
The percentage is calculated based on the width of the generated box's containing block. Keep in mind that this applies to 'margin-top' and 'margin-bottom' as well.
Is there a way to utilize percentages with respect to the height?
Unfortunately, it's not directly achievable with plain CSS.
If necessary, you could turn to JavaScript to calculate values dynamically.
Given that you've set the height explicitly to 100vh, you have that value to work with.
margin-top: calc(50vh - 42px);
To avoid redundancy, consider using a preprocessor like SASS to store 100vh as a variable.
Your code is not working properly because margins are being calculated based on the width of the element itself, regardless of other factors. So when you set margin-top: 50%, it's essentially saying "50% of this element's width".
Given that you already know the containing element's height is 100vh and you want 50% of that, all you need to do is use 50vh instead of 50%.
I've been pondering the importance of specifying vendor prefixes like 'webkit', 'moz', 'ms' or 'o' in modern CSS. It seems that Opera has switched to Webkit, meaning we may no longer need '-o-'. IE10 e ...
Can anyone help me figure out how to implement CSS when sending emails using PHP's mail() function? Here is what I have attempted: $subject = 'test'; $msg = <<<EOF <html> <body> <style typ ...
Is it possible to implement a functionality where clicking the Send button triggers a spinner next to the button, followed by changing the button text to "Message Sent"? I managed to change the button text, but there is no loading time, it happens instantl ...
Encountering an issue with my Ionic login form where the submit button gets disabled due to invalid form even when it's not, or sometimes displays a console error stating form is invalid along with null inputs. This problem seems to have surfaced afte ...
I'm currently working with Bootstrap 4 and attempting to make 3 columns on the page fill 100% height, only displaying scrollbars within the columns and not on the entire page. I have experimented with applying h-100 to the row div, as well as implemen ...
I am facing an issue with a JavaScript variable named addNumber. This variable is responsible for adding 1 to a div every time a button is clicked. However, the problem arises when I navigate between different pages on my website - the counter resets back ...
The code below is used to display a default pop-up when the page is refreshed or closed: var myEvent = window.attachEvent || window.addEventListener; var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, ...
Hey there! I have a question about creating something similar to this cool website: I'm working with Wordpress and using a child theme for my website. I want to include a fixed header as well. Currently, I've managed to give each div its own sc ...
I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...
Struggling to integrate a bootswatch theme into my .net core web application, I have been unable to locate any helpful resources or guides. My attempts to replace the default bootstrap.css file with that of my preferred theme have been unsuccessful. Afte ...
My goal is to incorporate the troika-three-text into my Three.js script by importing it through HTML, as demonstrated below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&q ...
I am currently using the @foreach Orb notation within MVEL to loop through a string array. someArrayPartOfAJSONObject = ["Item 1", "Item 2"] <ul> @foreach{item: someArrayPartOfAJSONObject} <li>@{item}</li> </ul> However, when ...
I'm having an issue with my text alignment when using the original bootstrap CSS. Instead of aligning left and right, the text is simply displayed side by side. .text-left { text-align: left!important } .text-right { text-align: right!impor ...
I recently attempted to create a responsive navigation bar using a YouTube tutorial that utilizes a checkbox to display and hide the menu on smaller screens. Despite meticulously following the tutorial and testing different browsers such as Chrome, Edge, a ...
Can I simultaneously link to a file as noticias.php and call a JavaScript function? <a href="javascript:toggleDiv('novidades');" class="linktriangulo"></a> The toggleDiv function in my noticias.php file: function toggleDiv(divId) { ...
Check out my blog Lately, I've noticed that some of my Blogger posts are not displaying thumbnails in the home menu when using a custom template. However, after testing with different custom templates, I don't believe the issue lies with the tem ...
Can anyone help me troubleshoot this code? It seems to only work with the !important rule, which I prefer not to use. I believe there must be a way to achieve the desired outcome without relying on it. What's intriguing is that the CSS line in questi ...
"Struggling with dynamically displaying div contents" Situation:- I have a list of 3 items: *Menu1 *Menu2 *Menu3 and I have separate div contents for each of these menu items. Requirement :- By default, Menu1 should be displayed. When Menu2 is clicked, ...
I attempted to implement @media (hover: hover) without success. In my design, I have three images in a row that reveal a text overlay when hovered over with a mouse. However, the issue arises when I try to switch to a mobile view, as the images remain un ...
"styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css", "node_modules/primeicons/primeicons.css", ...