How to center the text inside the anchor tag?

Question

I have arranged the anchor tag with text with borders. I want to make the text to center inside the block. I have tried padding, margin left, float but nothing is working.

 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> 

that physics text must be at middle.Can anyone help me out to solve this problem.

Answer 1

Just change the padding (left and right padding to half of what you had for right padding):

 .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

remove padding-right:206px; add 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

remove margin-left from .physicsc and padding-right from .physics a and set

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

Also check out centering guide .