アンカータグの内側にテキストを配置するにはどうすればよいですか？

Question

私は、境界線付きのテキストでアンカータグを配置しました。 テキストをブロックの中央に配置したい。 余白を残してみました。余白は残っていますが、何も動作していません。物理学のテキストは、誰もがこの問題を解決するために私を助けmiddle.Canでなければならないこと

body { 
 
       background-color:black; 
 
       background-repeat: no-repeat; 
 
       background-size: 100% 100%; 
 
       
 
      } 
 
      .title{ 
 
       height: 17%; 
 
       width: 100%; 
 
       margin: 0%; 
 
       text-align: center; 
 
       font-size: 2rem; 
 
       color: white; 
 
      } 
 
      .subjects{ 
 
       color: white; 
 
       width: 28%; 
 
       height: 7%; 
 
       border: 2px solid white; 
 
       font-size: 2rem; 
 
       border-radius:20px; 
 
       margin-top: 86px; 
 
       margin-left: 8px; 
 
       text-align:center; 
 
       vertical-align: middle; 
 
      } 
 
      
 
      .maths{ 
 
       margin-left: 24%; 
 
       margin-top: 41px; 
 
      } 
 
      
 
      .maths a{ 
 
       text-decoration: none; 
 
       color: white; 
 
       border: 2px solid white; 
 
       padding: 4px; 
 
       padding-right: 140px; 
 
       font-size: 2rem; 
 
       border-radius: 20px; 
 
       cursor: pointer; 
 
       vertical-align:middle; 
 
       display: inline-block; 
 
       
 
      } 
 
      .physics{ 
 
       margin-left: 24%; 
 
       margin-top: 41px; 
 
      } 
 
      
 
      .physics a{ 
 
       text-decoration: none; 
 
       color: white; 
 
       border: 2px solid white; 
 
       padding: 4px 103px; 
 
       padding-right: 206px; 
 
       font-size: 2rem; 
 
       border-radius: 20px; 
 
       cursor: pointer; 
 
       vertical-align:middle; 
 
       display: inline-block; 
 
       
 
      } 
 
      .chemistry{ 
 
       margin-left: 24%; 
 
       margin-top: 41px; 
 
      } 
 
      
 
      .chemistry a{ 
 
       text-decoration: none; 
 
       color: white; 
 
       border: 2px solid white; 
 
       padding: 4px; 
 
       padding-right: 169px; 
 
       font-size: 2rem; 
 
       border-radius: 20px; 
 
       cursor: pointer; 
 
       vertical-align:middle; 
 
       display: inline-block; 
 
       
 
      }

<div class="title"> 
 
      <h1>Syllabus</h1> 
 
     </div> 
 
    <div class="subjectsList"> 
 
     <div class="subjects"> 
 
      Syllabus 
 
      <span class="triangle"></span> 
 
     </div> 
 
     <div class="maths"> 
 
      
 
      <a href="mathsinfo.html" target="_blank"> 
 
       <!--<img src="images/maths.jpg" height="50px" width="50px" alt="Mathematics Icon">--> 
 
        Mathematics</a> 
 
     </div> 
 
     <div class="physics"> 
 
      
 
      <a href="physicsinfo.html" target="_blank">Physics</a> 
 
     </div> 
 
     <div class="chemistry"> 
 
      
 
      <a href="chemistryinfo.html" target="_blank">Chemistry</a> 
 
     </div> 
 
     </div>

。

Answer 1

ただ、パディング（あなたは右パディングのために持っていたものの半分に左右のパディング）を変更：

.physics{ 
 
       margin-left: 24%; 
 
       margin-top: 41px; 
 
      } 
 
      
 
      .physics a{ 
 
       text-decoration: none; 
 
       color: black; 
 
       border: 2px solid black; 
 
       padding: 4px 103px; 
 
       font-size: 2rem; 
 
       border-radius: 20px; 
 
       cursor: pointer; 
 
       vertical-align:middle; 
 
       display: inline-block;  
 
      }

<div class="physics"> 
 
      
 
      <a href="physicsinfo.html" target="_blank">Physics</a> 
 
     </div>

Answer 2

削除パディング右：206px; .physics aから.physicscから中央

.physics a{ 
       text-decoration: none; 
       color: black; 
       border: 2px solid black; 
       padding: 4px 0px; 
       font-size: 2rem; 
       border-radius: 20px; 
       cursor: pointer; 
       vertical-align:middle; 
       display: inline-block;  
       text-align:center; 
      } 

Answer 3

削除左マージンとパディング右とcentering guideをチェックアウトも

.physics {  
    text-align: center; 
} 
.physics a { 
    width:30%; // or anything you need 
} 

を設定：テキスト整列を追加します。