(1)首先列出相应的代码,即:
<template> <div class="header"> 城市选择 <i class="el-icon-arrow-left"></i> </div> </template> <script> export default { name: 'Home' } </script> <style scoped> .header{ position: relative; height: 1.5rem; line-height: 1.5rem; background: rgb(43, 214, 226); text-align: center; } .el-icon-arrow-left{ position: absolute; top: 0.24rem; left: 0; } </style>
(2)将line-height设置为对象的height时,此对象中的文字则会垂直居中。但给若给这个对象设置border则会出现问题。
(3)将父元素position设置为relative,而子元素设置为absolute时,子元素被限制在父元素的区域中。可以根据top、left等移动子元素。