html把图片定位在盒子中心,html – CSS在图像的右上角定位一个图标

2024-06-15 10:32:59

此示例可以拍摄任何高度的图像.

>转动< i class =“delete”>进入< div>

>包裹< img>使用新的删除div

>给.image：在最小高度之前：150px;并删除.image上的固定高度

>应用位置：相对于.delete

>将删除按钮应用于带有.delete的伪元素：之后或放置另一个< i>使它具有互动性.

HTML

CSS

.image:before {

content: "";

display: inline-block;

height: 100%;

vertical-align: middle;

min-height: 150px;

}

.image {

-moz-box-sizing: border-box;

border: 1px solid #DDDDDD;

float: left;

margin-bottom: 10px;

padding: 10px;

}

.delete {

position: relative;

vertical-align: middle;

display: inline-block;

}

.delete:after {

content: '';

position:absolute;

top:0;

right:0;

height: 20px;

width: 20px;

background: #F00;

}

/* If you need to use a real element remove .delete:after and use this --

.delete .delete-button {

content: '';

position:absolute;

top:0;

right:0;

height: 20px;

width: 20px;

background: #F00;

}*/

html把图片定位在盒子中心,html – CSS在图像的右上角定位一个图标相关推荐

css如何把图片设置为黑白_使用CSS将图像转换为黑白图像
css如何把图片设置为黑白 Desaturating a color image couldn't be simpler with CSS. The filter is typically appli ...
CSS基础「五」定位
本篇文章为 CSS 基础系列笔记第五篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS（五）：定位与显示隐藏
目录定位为什么需要定位定位组成 1. 定位模式 2. 边偏移定位模式 1. 静态定位 static 2. 相对定位 relative(重要) 3. 绝对定位 absolute(重要) 4. 固 ...
窗口缩小怎么让定位的盒子不动_盒子模型
盒子模型先记一下我觉得比较重要的东西 CSS的优先级内联样式>ID 选择器>伪类>属性选择器>类选择器>元素(类型)选择器>通用选择器行内元素,块元素,行内块 ...
Html04-浮动与定位，盒子模型
浮动 (1).标准流这个单词很多人翻译为文档流,字面翻译普通流或者标准流都可以. html语言当中另外一个相当重要的概念----------标准流!或者普通流.普通流实际上就是一个网页内标签元素正常 ...
intouch负值显示0_17、定位的盒子居中显示
盒子居中显示 margin: 0 auto; 只能让标准流的盒子居中对齐,脱标的盒子无法居中: 定位的盒子居中:先向右走父级盒子的一半50%,然后再向左走子盒子的一半(margin-left:负值): ...
固定定位的盒子使用margin：0 auto；是无法水平居中的，此时该怎么操作呢？
固定定位的盒子使用margin:0 auto:是无法水平居中的,此时该怎么操作呢? 第一步第二步建议完整小栗子第一步定位距离左侧(相对于浏览器)50%,此时盒子左侧是在浏览器中间的 posi ...
css图片在盒子里居中,让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
img图片如何自适应盒子尺
img图片如何自适应盒子尺首先保证图片可以填满然后纵向居中 .img-cantainer {position: relative;width: 260px;height: 150px;overfl ...

最新文章

热门文章