HTML and CSS - Center Tabs to the center of the page

Question

HTML and CSS - Center Tabs to the center of the page

Navigation

#1 by (3 votes)

2

It's a newbie question, but I'm having this difficulty.

I have 3 tabs that look like this:

ButI'dlikeyoutostayinthecenterlikethis:

Alsoinsteadoftext,Iwouldliketoputimages.

MyCSSforthetabslookslikethis:

/*Stylethetab*/div.tab{overflow:hidden;border:none;margin-top:-4px;background-color:#36D100;position:sticky;height:102px;width:100%;}/*Stylethebuttonsinsidethetab*/div.tabbutton{background-color:inherit;margin-top:7px;border:none;margin-bottom:center;cursor:pointer;transition:0.3s;font-size:17px;height:95px;width:186px;}/*Changebackgroundcolorofbuttonsonhover*/div.tabbutton:hover{background-color:#ddd;}/*Createanactive/currenttablinkclass*/div.tabbutton.active{background-color:#fff;}/*Stylethetabcontent*/.tabcontent{display:none;padding:6px12px;border:0pxsolid#ddd;border-top:none;}

AndmyHTML,thisway:

<content><divclass="tab">
            <button class="tablinks" onclick="openCity(event, 'London')" active>London</button>
            <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
            <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
        </div>

        <div id="London" class="tabcontent" data-ng-click="London">
            <h3>London</h3>
            <p>London is the capital city of England.</p>
        </div>

        <div id="Paris" class="tabcontent">
            <h3>Paris</h3>
            <p>Paris is the capital of France.</p>
        </div>

        <div id="Tokyo" class="tabcontent">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan.</p>
        </div>

        <script>
            function openCity(evt, cityName) {
                var i, tabcontent, tablinks;
                tabcontent = document.getElementsByClassName("tabcontent");
                for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                }
                tablinks = document.getElementsByClassName("tablinks");
                for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(" active", "");
                }
                document.getElementById(cityName).style.display = "block";
                evt.currentTarget.className += " active";
            }

        </script>

    </content>

How can I do this?

javascript html html5 css css3

asked by anonymous 19.11.2017 / 17:14

1 answer

How to select columns in which years are the same in Oracle? Using JSON in JQuery library

score 3 · Accepted Answer

Add only two rows in the .tab class to center:

display: flex;
justify-content: center;

You can use images as background by creating a custom class for each button:

   .tokyo{
       background-image: url(http://canada-tokyo.ca/wp-content/uploads/2017/06/TokyoTokyo.png);
       background-size:cover;
   }

   .paris{
       background-image: url(http://www.parkspics.com/France/Paris.gif);
       background-size:cover;
   }

   .london{
       background-image: url(https://thumbs.dreamstime.com/b/vector-london-icon-set-file-eps-format-35922984.jpg);
       background-size:cover;
   }

.tokyo{
    background-image: url(http://canada-tokyo.ca/wp-content/uploads/2017/06/TokyoTokyo.png);
    background-size:cover;
}

.paris{
    background-image: url(http://www.parkspics.com/France/Paris.gif);
    background-size:cover;
}

.london{
    background-image: url(https://thumbs.dreamstime.com/b/vector-london-icon-set-file-eps-format-35922984.jpg);
    background-size:cover;
}

div.tab {
    overflow: hidden;
    border: none;
    margin-top: -4px;    
    background-color: #36D100;
    position:sticky;
    height: 102px;
    width: 100%;
    display: flex;
    justify-content: center;

}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    margin-top: 7px;
    border: none;
    margin-bottom: center;

    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
    height: 95px;
    width: 186px;

}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #fff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 0px solid #ddd;
    border-top: none;
}

<div class="tab">
      <button class="tablinks london" onclick="openCity(event, 'London')" active></button>
      <button class="tablinks paris" onclick="openCity(event, 'Paris')"></button>
      <button class="tablinks tokyo" onclick="openCity(event, 'Tokyo')"></button>
  </div>

  <div id="London" class="tabcontent" data-ng-click="London">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
  </div>

  <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
  </div>

  <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
  </div>