私はこのリストが

Question

私はタブが中心たくなく、コンテンツ、私は理解している場合は、リストを中央揃えにしたい見出し

<ul class="tab" id="tabs"> 
    <li><a href="#" class="tablinks" onclick="openClimate(event,'Negatives')">Negatives</a></li> 
    <li><a href="#" class="tablinks" onclick="openClimate(event, 'Positives')">Positives</a></li> 
    <li><a href="#" class="tablinks" onclick="openClimate(event, 'Climate')">Climate Change</a></li> 
    <li><a href="#" class="tablinks" onclick="openClimate(event, 'Saving')">Saving Energy</a></li> 
</ul> 

Answer 1

をセンタリングする方法を知っているが、テキストを保ついけない中心に取得できますか左揃え：

ul.tab { 
    display:block; 
    text-align: center; 
} 

.tab li { 
    display: inline-block; 
    text-align: left; 
} 

Answer 2

私はあなたがしたいことを理解していると思います。これは、あなたがdisplay: inline-blockを使用して「タブ」を中心できる方法です。

.tab { 
 
    display: block; 
 
    text-align: center; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.tab li { 
 
    display: inline-block; 
 
} 
 
.tab li a { 
 
    text-decoration: none; 
 
    padding: 5px; 
 
}

<ul class="tab" id="tabs"> 
 
    <li><a href="#" class="tablinks" onclick="openClimate(event,'Negatives')">Negatives</a> 
 
    </li> 
 
    <li><a href="#" class="tablinks" onclick="openClimate(event, 'Positives')">Positives</a> 
 
    </li> 
 
    <li><a href="#" class="tablinks" onclick="openClimate(event, 'Climate')">Climate Change</a> 
 
    </li> 
 
    <li><a href="#" class="tablinks" onclick="openClimate(event, 'Saving')">Saving Energy</a> 
 
    </li> 
 
</ul>