Centering Vertical Tabs Using HTML and CSS

Question

Centering Vertical Tabs Using HTML and CSS

I followed a vertical tab tutorial on W3Schools and would like to implement it on my website. However, I am having trouble centering the tabs after reducing their width sizes. I have attempted adding div tags to the code and aligning them to the center without success.

I need assistance with this issue.

function openTest(evt, testName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.
//Remaining code omitted for brevity

<footer>
      <p class="footp">©All rights reserved.</p>
      <p class="footp">|</p>
      <p class="footp">Internal Use Only</p>
      <p class="footp">|</p>
      <p class="footp">Maintained By</p>
    </footer>
  </div>

html css

Answer 1

Answer №1

To solve this issue, I recommend grouping the divs with classes .tab and .tabcontent within a parent div and using the flex property on that parent div. Additionally, ensure that the .tabcontent elements have specific widths to prevent them from occupying the entire width of the page.

Here is an example of the updated HTML structure:

<div class="verticalTabContainer">
    <div class="tab">
        ...
    </div>

    <div id="Full" class="tabcontent">
      ...
    </div>

    <div id="QRC" class="tabcontent">
      ...
    </div>

    <div id="Cold" class="tabcontent">
      ...
    </div>

    <div id="Hot" class="tabcontent">
      ...
    </div>

    <div id="Room" class="tabcontent">
      ...
</div>

Include the following additional CSS styles:

.verticalTabContainer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.tabcontent {
  width: 50%;
}

Finally, don't forget to include the necessary JavaScript function to handle tab interactions.

Answer 2

To solve this issue, I recommend grouping the divs with classes .tab and .tabcontent within a parent div and using the flex property on that parent div. Additionally, ensure that the .tabcontent elements have specific widths to prevent them from occupying the entire width of the page.

Here is an example of the updated HTML structure:

<div class="verticalTabContainer">
    <div class="tab">
        ...
    </div>

    <div id="Full" class="tabcontent">
      ...
    </div>

    <div id="QRC" class="tabcontent">
      ...
    </div>

    <div id="Cold" class="tabcontent">
      ...
    </div>

    <div id="Hot" class="tabcontent">
      ...
    </div>

    <div id="Room" class="tabcontent">
      ...
</div>

Include the following additional CSS styles:

.verticalTabContainer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.tabcontent {
  width: 50%;
}

Finally, don't forget to include the necessary JavaScript function to handle tab interactions.

Centering Vertical Tabs Using HTML and CSS

Answer №1

Similar questions

I created a customized version of jQuery tabs, but I am looking for an external link to display the tab content and to style the original navigation

Struggling to implement the UI router into my Angular Framework

"Unlock the secrets to commanding respect in the web form layout by mastering the art

Utilize the splice function when resizing the window based on specific breakpoints

What happens when dynamically loaded static resources are loaded?

Creating a dynamic word cloud in D3: Learn how to automatically adjust font sizes to prevent overflow and scale words to fit any screen size

"Use AJAX to dynamically update a div element when a button is clicked with a specific value

Incorporating an HTML file into a DIV container while also displaying menu links

Sharing a codepen.io project on a GitHub page

Having trouble updating the icon on my website using FontAwsome

What is the best way to center an image and text vertically using bootstrap?

Wagtail Django TableBlock not showing up properly on the webpage

Guide on incorporating data from a text file into an HTML table

What is the best way to ensure that two divs have aligned bottom edges?

In PHP, the counter will reset to zero after reaching 4 items and start a new div for the

angular trustAsHtml does not automatically insert content

Tutorial on creating a loop for a function based on a specific condition

How to Eliminate Lower Borders from DataGrid Component in Material UI (mui)

Ways to extend the length/size of the HTML5 range input type

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8