.upload-div { width: 100%; height: 180px; box-sizing: border-box; margin: 2% 0; padding: 0 20%; display: flex; justify-content: space-around; } .layout { display: flex; align-items: center; justify-content: center; } .layui-upload { width: 450px; height: 300px; border: 1px solid; border-radius: 5px; cursor: pointer; } .upload-tip { flex-direction: column; width: 100%; height: 100%; cursor: pointer; } #upload-file{ /*flex-direction: column;*/ display: none; width: 100%; height: 100%; position: static; } .file-name { width: 100%; height: 100%; position: relative; top: -8.5%; } .upload-tip img { width: 64px; height: 64px; } .handle { position: relative; background-color: red; color: white; filter: alpha(Opacity=80); -moz-opacity: 0.5; opacity: 1; /*width: 212px;*/ text-align: right; height: 25px; width: 25px; border-radius: 25px; display: flex; align-items: center; justify-content: center; left: 96%; top: -4%; z-index: 999; /*display: none;*/ } .handle p { font-size: 20px; } img { image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ }