如何將錨標籤中的文本居中？

我已經安排了帶有帶邊框文本的定位標記。我想讓文本居中在塊內。我已經嘗試過填充，餘量保留，浮動，但沒有任何工作。如何將錨標籤中的文本居中？

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>

物理學的文字必須middle.Can誰能幫我解決這個問題。

來源

2017-03-03 Nani Bhavani

只要改變（你有什麼合適的填充左，右填充一半）填充：

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

來源

2017-03-03 13:35:08 Johannes

邊框也越來越增加 –

我不確定你的意思，但元素的整體大小保持完全一樣 – Johannes

我的意思是當我在我的代碼中做文字移動時，邊界線也是增加它的大小 –

刪除填充右：206px;添加文本對齊：中心

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

來源

2017-03-03 13:41:59

刪除利潤率左從.physicsc和padding-直接從.physics a並設置

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

還檢查了centering guide。

來源

2017-03-03 13:42:09 curveball

如何將錨標籤中的文本居中？

回答

相關問題