- 首先父盒子设置成
display: flex - 子元素(行内元素)设
flex: 1和text-align: right
<div class="flex-box"> <div>1</div> <div>2</div> <div>3</div> <span class="item-right">水平居右并垂直居中</span> </div>.flex-box { display: flex; flex-direction: row;}.flex-box div { width: 100px; height: 100px; background: #f9f9f9; margin-right: 10px;}.item-right { flex: 1; text-align: right; align-self: center;}完整的HTML如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .flex-box { display: flex; flex-direction: row; } .flex-box div { width: 100px; height: 100px; background: #f9f9f9; margin-right: 10px; } .item-right { flex: 1; text-align: right; align-self: center; } </style></head><body> <div class="flex-box"> <div>1</div> <div>2</div> <div>3</div> <span class="item-right">水平居右并垂直居中</span> </div></body></html>