將文本水平和垂直居中放置在圓圈中

Question

我有一個問題，文本沒有出現在圓圈的中心，我該如何解決？

 #indexClient { float: left; margin-top: 10px; margin-left: 20px; width: 150px; height: 150px; border-radius: 50%; font-size: 30px; color: yellow; line-height: 20px; text-align: center; background: #99CCCC } 

 <div id="indexClient"> <p>Client Side</p> </div> 

Answer 1

方法1： line-height相等的height技巧

（適用於單行文本）。

 .circle { width: 150px; height: 150px; border-radius: 50%; font-size: 30px; background: #9cc; line-height: 150px; text-align: center; } 

 <div class="circle">Hello</div> 

方法2： line-height + inline-block

（適用於單行和多行文本）。

 .circle { width: 150px; height: 150px; border-radius: 50%; font-size: 30px; background: #9cc; line-height: 150px; text-align: center; } .circle span { display: inline-block; vertical-align: middle; line-height: normal; padding: 0 25px; } 

 <div class="circle"> <span>Test Long Item</span> </div> 

方法3：使用CSS table + table-cell

（適用於單行和多行文本）。

 .circle { width: 150px; height: 150px; border-radius: 50%; font-size: 30px; background: #9cc; text-align: center; display: table; } .circle span { display: table-cell; vertical-align: middle; padding: 0 25px; } 

 <div class="circle"> <span>Test Long Item</span> </div> 

方法4：使用CSS3 transform

（適用於單行和多行文本）。

 .circle { width: 150px; height: 150px; border-radius: 50%; font-size: 30px; background: #9cc; text-align: center; position: relative; } .circle span { position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 

 <div class="circle"> <span>Test Long Item</span> </div>