css3 上下两端对齐和左右两端对齐

CSS3中实现文本的上下两端对齐可以使用vertical-align属性，设置为text-top或text-bottom。

CSS实例代码：

.vertical-align-text-top {
  vertical-align: text-top; /* 文本顶部对齐 */
}
 
.vertical-align-text-bottom {
  vertical-align: text-bottom; /* 文本底部对齐 */
}

HTML实例代码：

<div>
  <img src="icon.png" class="vertical-align-text-top" alt="顶部对齐">
  <span>文本顶部对齐</span>
</div>
 
<div>
  <img src="icon.png" class="vertical-align-text-bottom" alt="底部对齐">
  <span>文本底部对齐</span>
</div>

CSS3中实现元素的左右两端对齐，可以使用width和text-align属性，将元素宽度设置为父容器宽度，并将文本对齐方式设置为justify。

CSS实例代码：

.full-width {
  width: 100%; /* 元素宽度设置为父容器宽度 */
  text-align: justify; /* 文本两端对齐 */
}
 
/* 为了使最后一行文本也实现两端对齐，可以添加伪元素 */
.full-width::after {
  content: '';
  display: inline-block;
  width: 100%; /* 伪元素宽度设置为100%，占满父容器宽度 */
}

HTML实例代码：

<div class="full-width">
  这是一段测试文本，将会左右两端对齐显示。
</div>

以上代码实现了文本的上下两端对齐和元素的左右两端对齐。