框中的HTML + CSS文本

Question

我遇到了css和html的問題。 我需要將文本放在框中。 當我放置文本時，所有的框都會向下移動一點點。 這是我的代碼

 .box { width: 100px; height: 100px; background: #cce; display: inline-block; margin-left: 10px; } 

 <div id="3box"> <div class="box"> <p>Title</p> </div> <div class="box"> </div> <div class="box"> </div> </div> 

Answer 1

添加vertical-align: top; 和text-align: center; 像這樣的.box ：

 .box { width: 100px; height: 100px; background: #cce; display: inline-block; margin-left: 10px; vertical-align: top; text-align: center; } 

 <div id="3box"> <div class="box"> <p>Title</p> </div> <div class="box"> </div> <div class="box"> </div> </div> 

Answer 2

要使文本垂直和水平居中，而不想關心文本長度，你可以使用table - table-cell方法來完成它

 .box { width: 100px; height: 100px; background: #cce; float: left; margin-left: 10px; display: table; } .box p { display: table-cell; text-align: center; vertical-align: middle; } 

  <div id="3box"> <div class="box"> <p>Title</p> </div> <div class="box"> </div> <div class="box"> </div> </div> 

這也提供了很好的瀏覽器支持。

Answer 3

要將塊中的text-align: center;添加text-align: center;

 .box { width: 100px; height: 100px; text-align: center; vertical-align: top; background: #cce; display: inline-block; margin-left: 10px; } 

 <div id="3box"> <div class="box"> <p>Title</p> </div> <div class="box"> </div> <div class="box"> </div> </div>