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>
htmlcss

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.

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

Having trouble with uploading images?

I'm having issues with using PHP to upload an image to a folder. Can someone please help me troubleshoot this? Thank you! Here is the code for setup.php <?php include("../includes/config.php"); ?> <?php if ($_SESSION["isadmin"]) { ...

phpmysqlhtml

Discrepancy in inner div presentation between Internet Explorer and Chrome

In my coding dilemma, the "outerDIV" contains an "innerDIV", with Chrome displaying the "innerDIV" at 491px while IE shows it as 425px (matching outerDIV). This discrepancy causes issues in viewing child elements within "innerDIV": Chrome shows the first t ...

htmlcssinternet-explorergoogle-chrome

Is there a way I can add opacity to a div without impacting the other elements contained in it?

When I set the opacity of a div, it seems to affect all the other elements inside that div by making them transparent too. However, I am looking for a solution where the child elements do not inherit the opacity of their parent. Any assistance on this is ...

css

"Enhance your website with the ability to dynamically load and display

I am facing a little issue and need suggestions because I am struggling with inserting data into an HTML page using the append jQuery function and AJAX request. Within my HTML block, under ul elements, there are some images that I directly insert into the ...

jqueryhtmlajaxappendinstagram

Is there a specific measurement or scale for the dragging feature in jQuery UI draggables?

I'm interested in adjusting the position of my draggable element based on the distance moved by the mouse. For instance, if the scale is 1:2 and the cursor is moved 10px to the right, then the draggable should move 20px. I already have my draggable ...

javascriptjqueryhtmljquery-ui

Set a maximum height for an image without changing its width dimension

I am facing an issue with an image displayed in a table. The image is a graph of profiling information that can be quite tall (one vertical pixel represents data from one source, while one horizontal pixel equals one unit of time). I would like to set a ma ...

javascripthtmlcssimage

Can minification of JS be achieved in a Jekyll environment?

Currently, I am in the process of developing a project with Jekyll and one of the requirements is to minify HTML, CSS, and JS. I was wondering if Jekyll has built-in features for JS minification. It may seem like a simple question, but since I am new to ...

javascripthtmlcssjekyll

What is the best way to center text within a div that is wider than 100%?

On my webpage, I have a header set to 100% width and text positioned on the banner. However, when zooming in or out, the text's position changes. How can I ensure that the text stays in place regardless of zoom level? Example: jsfiddle.net/5ASJv/ HT ...

csshtml

CSS: Aligning content vertically centered

Take a look at the following example: <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> The height of box1 is smaller than that of box2. Is there a way to vertically center box1 w ...

htmlcss

How to incorporate JSON into a d3.js calendar display?

Learning d3 charts and javascript has been quite challenging for me. After researching a lot, I successfully populated the chart with CSV data. Now, my next goal is to populate the chart with json data. This is the code I'm using, which is inspired ...

javascriptjqueryhtmljsond3.js

Instructions on converting text to a Float value and displaying the calculated result in a separate div

I am attempting to extract a string from a div, clear its content, then retrieve the actual price from ".skuBestPrice", remove any special characters, perform calculations to convert it into a floating point number, and display this number in the div ".tot ...

javascripthtmljquery

allowing absolutely positioned region to expand

For further information, please visit this page: test page In the process of designing a website, I have implemented a sidebar featuring an accordion style vertical navigation bar. The sidebar is set to be absolutely positioned in relation to its containi ...

jquerycsspositioningcss-position

Is there a way to have text appear in a popup when I reach it while scrolling?

Is there a way to make the textblocks on my website increase in size or pop up when I scroll down to them? I've attempted to search for a solution online but have been unsuccessful in finding one. ...

javascripthtmlcssfrontendweb-deployment

Tips on creating a responsive div element within the viewport?

I have a variety of nested div elements within a parent div, set up like this: #mycontent > div { width: 14.28%; } <div id="myheader">some header content</div> <div class="container" id="mycontent"> <div class="outerdiv" id= ...

htmlcss

Strip certain tags from HTML without including iframes

Removing specific tags from HTML can be tricky, especially when working with PHP and JavaScript. One approach is to fetch an HTML page in a PHP file using curl and getJSON, storing the result in a .js file. However, this method may encounter issues with mu ...

phpjavascriptjqueryhtmlregex

Error encountered: iPad3 running on iOS7 has exceeded the localStorage quota, leading to a

Experiencing a puzzling issue that even Google can't seem to solve. I keep getting the QuotaExceededError: DOM Exception 22 on my iPad3 running iOS7.0.4 with Safari 9537.53 (version 7, WebKit 537.51.1). Despite turning off private browsing and trying ...

javascriptioshtmlipadios7

Fuzzy text upon scrolling in Internet Explorer version 6

Having a problem with text in Internet Explorer. When the page initially loads, the text appears clean and sharp. However, when I double-click on some white space of the page, the text becomes distorted as shown in the following image: Click here for alt ...

htmlcssinternet-explorerinternet-explorer-6

"Enhancing Your Web Pages: Generating and Inserting HTML Elements on the Fly Using

For my master's degree project, I am working on developing a shopping web app. The issue I am facing is that I need assistance with creating a div and adding it to the HTML file with an ID matching the category name from the .ts file when the addCate ...

htmlangularbootstrap-4

Strategies for avoiding overflow-x issues in Safari and mobile devices

I am currently facing an issue where I have a div containing a table with overflow enabled, allowing the whole table to be viewed by scrolling. However, on Safari and mobile Safari browsers, there is a horizontal scroll on the html and body elements. Whil ...

htmlcssreactjshtml-tablereact-bootstrap-table

Tips on aligning text to the left on mobile devices using CSS and HTML

When viewed on a standard 16:9 computer screen, everything looks perfect with text on the left and an image on the right. However, when it comes to smaller screens like phones, the picture appears on top of the paragraph instead. I am new to this, so any a ...

htmlcss