如何将文本居中在锚标记内？

Question

我已经为锚标签安排了带边框的文字。 我想让文本在块内居中。 我试过填充，边距留下，漂浮但没有任何效果。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

物理文本必须在中间。任何人都可以帮助我解决这个问题。

Answer 1

只需更改填充（左右填充为右边填充的一半）：

＆＃13;

＆＃13;

.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;    
            }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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向右填充并设置

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

另请查看centering guide。