如何在錨標簽內居中放置文本？

Question

我已經用帶有邊框的文本排列了錨標簽。 我想使文本在塊內居中。 我已經嘗試過填充，左邊距剩余，浮動，但是沒有任何效果。

 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

刪除padding-right：206px; 添加text-align：center

.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

從.physicsc移除margin-left並從.physics a移除padding-right並設置

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

另請查閱對中指南 。