Perfectly aligning css tabs both vertically and horizontally with dead centering technique

Can you help me figure this out?

Currently, the tabs in the HTML and CSS provided below are positioned close to the top of the screen. How can I adjust the markup so that the tabs are dead-centered (both vertically and horizontally) instead?

Check out this fiddle for reference: https://jsfiddle.net/812ehkyf/559/

Here's the code snippet:

<!DOCTYPE html>

<html>

<head>

<style>
body {
   background: #999;  
   padding: 20px 40px; 
}

.tabs {
  position: relative;   
  min-height: 200px; /* This needs improvement */
  clear: both;
  margin: 35px 0 25px;
  background: white;
}
.tab {
  float: left;

}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
  top: -29px;
  -webkit-transition: background-color .17s linear;
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: -1px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
  -webkit-transition: opacity .6s linear;
  opacity: 0;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
  opacity: 1;
}
</style>

</head>

<body>


<div class="tabs">

   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>

       <div class="content">
           <p>Stuff for Tab One</p>
       </div> 
   </div>

   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>

       <div class="content">
           <p>Stuff for Tab Two</p>

           <img src="http://placekitten.com/200/100">
       </div> 
   </div>

    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>

       <div class="content">
           <p>Stuff for Tab Three</p>

           <img src="http://placedog.com/200/100">
       </div> 
   </div>

</div> 

</body>

</html>

Answer №1

When it comes to centering content vertically on a webpage, applying CSS tricks can be effective but may stop working with a browser render update. This task can sometimes be challenging, but there is a solution that involves using jQuery or other JavaScript frameworks.

// Obtain the height of the window
    var h = $(window).height();
// Get the height of the tabs
    var e = $('.tabs').height();
// Calculate the space between the tabs and the top/bottom by dividing the full height minus the tabs height by two
    var y = ((h - e) / 2);
// Set this calculated blank space as the margin-top
    $('.tabs').css('margin-top', y);

This method will ensure that the content is centered on all screens. You can trigger it when

 $(document).ready 

I also recommend adding an event listener for

$(window).resize()

to maintain responsiveness.

View the demonstration here

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

Is there a way to stop these symbols (♈♉♊♋♌♍♎♏♐♑♒♓) from being substituted with emojis?

I am currently working on a project involving the simulation of the Prague Astronomical Clock (). My goal is to display the glyphs representing signs of the zodiac, which are in the Unicode range U+263C-2653 along with other astronomical symbols. My prefe ...

Personalized Horizontal Radio Button Design

I have been struggling to achieve the desired design for radio buttons but without success. https://i.sstatic.net/TU7Ks.png Despite using bootstrap for my website, I am only able to achieve this: https://i.sstatic.net/WbzqS.png This is the code I am cu ...

Tips for centrally zooming responsive images without altering their dimensions

I have created a custom jQuery and CSS function that allows an image to zoom in and out on mouseover while maintaining a constant box size. I modified an example code to suit my needs. Check out the demo here: https://jsfiddle.net/2fken8Lg/1/ Here is the ...

How can I update two divs simultaneously with just one ajax call?

Is there a way to update 2 divs using only one ajax request? The code for updating through ajax is in ajax-update.php. <?php include("config.inc.php"); include("user.inc.php"); $id = $_GET['id']; $item = New item($id); $result = $item->it ...

"I'm experiencing an issue where my JSON data is not displaying in the browser when I run the code

I am having trouble displaying my json data in the browser. This is my first time working with json and I can't seem to identify the issue. I tried researching online and found that it could be related to mime types, but I still can't solve it. B ...

What is the most efficient method for applying multiple classNames to elements in Next.js?

Could you provide me with a list of all methods, both with and without packages? Also, I'm interested in knowing why one method is considered better than the others. ...

Exploring the beauty of background color curves in React Native

Struggling to figure out how to create a curved background color on the top (header part) of my design. Check it out I'm looking to achieve this curved design for my header part Here is the code snippet I have so far: <View style={{backgroundColo ...

Is there a way to specifically import only variables and mixins from Sass stylesheets?

Using the Zurb Foundation 4 (S)CSS framework has presented a challenge with massively duplicated styles. Each file that I import 'foundation' into brings along all of Foundation's styles, resulting in redundant declarations for body, .row, . ...

What is the process of transforming this jQuery script into AngularJS code?

Currently I am facing a situation where I am utilizing Angular1.x for a project. On a specific subpage, there are small clickable images along with some additional content below these images. The requirement is that only the images should be visible init ...

Step-by-step guide on showcasing an image within the sidebar-wrapper CSS class

I am trying to include an image in the #sidebar-wrapper class using the code below: CSS: #sidebar-wrapper { background-image:url('/images/nav.jpg'); margin-left: -250px; left: 250px; width: 250px; position: fixed; height: 100%; ov ...

Is there a way to execute a JavaScript function by clicking on an anchor tag?

Many websites, such as StackOverflow, have attempted to address this particular issue. However, the explanations provided are complex and difficult for me to grasp. I am looking for someone who can help identify my mistakes and explain the solution in simp ...

Create a PDF document using HTML code stored on a separate component within an Angular 2 application

I am facing an issue with my parentComponent and childComponent setup. Specifically, I have a button called downloadPDF in the parentComponent that is supposed to trigger a PDF download from the HTML code of the childComponent without displaying the childC ...

What is the suitable condition necessary for optimal functionality?

Greetings all! I am a newbie in the world of development and also new to Stack Overflow. This is my maiden post seeking assistance on the following issue: $(document).ready(function() { $(".header").click(function() { if ($(".header-content"). ...

What is the best way to link and store invoice formset with the main form foreign key in Django?

I am new to Django and need help. I am trying to save my invoice in a database, but the issue I'm facing is that I can't retrieve the foreign key from the main form when I try to save the formset. View.py def createInvoice(request):` if requ ...

Python Issue with BeautifulSoup: find_all() returning incorrect list of elements

I am currently using Python 2.7.3 and the bs.version I have is 4.4.1 However, when running this code snippet: from bs4 import BeautifulSoup # parsing html = """ <html> <head id="Head1"><title>Title</title></head> <body&g ...

Preserve HTML element states upon refreshing the page

On my webpage, I have draggable and resizable DIVs that I want to save the state of so they remain the same after a page refresh. This functionality is seen in features like Facebook chat where open windows remain open even after refreshing the page. Can ...

I am struggling to decide which attribute to use for implementing image swap on mouseover() and mouseout()

I have a problem using jQuery to switch between images when hovering on and off. Here's the code snippet I'm working with: HTML <img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt=""> jQuery $(" ...

Encountering issues with CSS selectors when using Selenium WebDriver

I am encountering an error with the following code: elem = new Array() elem = driver.findElements(By.CssSelector('input')); What could be causing the issue in the code above? If I have an HTML form like this: <form role="form" method="post ...

The ng-controller directive is not functioning accurately

I attempted to execute the following basic HTML: <!DOCTYPE html> <html ng-app="tempApp"> <head> <script src="js_libs/angular/angular.min.js"></script> <script src="js_libs/angular/bootstrap.js"></script&g ...

Prevent keypress from being detected while the confirm box is displayed

My website heavily relies on key events, and for certain actions, it triggers a bootbox confirm box. This confirm box appears over a transparent layer, blocking all mouse click actions unless the user interacts with the confirm box. Now, I also want to dis ...