1，<span>标签在<div>里的位置---左上
<div class="box"> <span>文件上传</span> </div>
*{ padding: 0; margin: 0; } .box{ width:200px; height:200px; background-color: #eb7350; } .box span{ padding:10px; background-color: #1AA094; }
2，当一个div里是一个div的时候，子div在父div里的位置是上部
3，如果我们想要使用line-height使“文件上传”居中，那我们必须使包裹它的标签是inline属性，inline-block不行。
<style> *{ padding: 0; margin: 0; } .box{ width:200px; height:200px; line-height:200px; background-color: #eb7350; } .upload{ display: inline; height:30px; width:200px; background-color: #1AA094; } </style> </head> <body> <div class="box"> <div class="upload">文件上传</div> </div>
4,如果我们想让文件上传几个字靠右垂直居中，我想到了使用float:right属性来实现，发现，确实靠右了，但不垂直居中了
<style> *{ padding: 0; margin: 0; } .box{ display: inline-block; width:200px; height:200px; line-height:200px; background-color: #eb7350; } .upload{ float:right; height:30px; width:100px; background-color: #1AA094; } </style> </head> <body> <div class="box"> <div class="upload">文件上传</div> </div>
为什么？怎样解决呢？？？
我使用了绝对定位，使"文件上传"垂直居中
<style> *{ padding: 0; margin: 0; } .box{ width:200px; height:200px; background-color: #eb7350; position:relative; } .upload{ height:30px; width:100px; display:inline; background-color: #1AA094; position:absolute; right:0; top:85px; } </style> </head> <body> <div class="box"> <div class="upload">文件上传</div> </div> </body>