css三个字跟2个字对齐

如何使CSS中的三个字和两个字对齐？以下是一些简单的方法。

1.使用空格

CSS code:
.text{
   display:inline-block;
   width:60px;
   text-align:center;
}
.text span{
   display:inline-block;
   width:20px;
} 

HTML code:

<div class="text">
   <span>三个字</span>
   <span>两个</span>
</div> 

2.使用伪元素:before

CSS code:
.text:before{
   content:"三个字";
   display:inline-block;
   width:60px;
   text-align:center;
}
.text span{
   display:inline-block;
   width:20px;
} 

HTML code:

<div class="text">
   <span>两个</span>
</div> 

3.使用table布局

CSS code:
.table{
   display:table;
   width:80px;
}
.td{
   display:table-cell;
   width:20px;
   vertical-align:middle;
}
.td.text{
   text-align:center;
} 

HTML code:

<div class="table">
   <div class="td text">三个字</div>
   <div class="td">两个</div>
</div> 

以上是几种常见的方法，可以根据实际情况选择适合自己的方法。