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

Question

It’s a Newbie question, but I’m having a hard time.

I have 3 tabs that are like this:

But I’d like you to stay in the center like this:

Also instead of text, I would like to place images.

My CSS for tabs are like this:

/* Style the tab */
div.tab {
    overflow: hidden;
    border: none;
    margin-top: -4px;    
    background-color: #36D100;
    position:sticky;
    height: 102px;
    width: 100%;

}

/* 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;
}

And my HTML this way:

 <content>




        <div class="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?

Answer 1

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

display: flex;
justify-content: center;

You can use images like background creating a class custom 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>