CSS中,图片的对齐方式有很多种。以下介绍常见的几种方式。
一、文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐。
设置各对象的vertical-align属性,属性说明:
baseline-将支持valign特性的对象的内容与基线对齐
sub-垂直对齐文本的下标
super-垂直对齐文本的上标
top-将支持valign特性的对象的内容与对象顶端对齐
text-top-将支持valign特性的对象的文本与对象顶端对齐
middle-将支持valign特性的对象的内容与对象中部对齐
bottom-将支持valign特性的对象的文本与对象底端对齐
text-bottom-将支持valign特性的对象的文本与对象顶端对齐
二、基于定位方式的居中
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
或
.img-wrap {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.img-wrap img {
display: inline-block;
vertical-align: middle;
}
-
如何用css快速实现三角形通过css和伪类也可以实现各种三角形。
-
css实现手机充电动画效果通过css,我们可以实现很多动画效果,例如,我们通过animation,transform,filter,这些动画相关的css属性,就可以模拟手机充电的动画效果:
-
如何用css实现倒影效果在电商和产品广告中,我们经常看到水中倒影的效果,其实这种效果我们也可以通过css来实现。并且这种效果也是通过css的几种属性来实现。
-
利用css的延迟操作为页面的交互和动画带来更好的效果css延迟操作是一种常见的css技术,可以用来延迟元素的显示时间。通过在css中设置元素的延迟时间,可以让元素在页面加载完成后才显示,从而为页面的交互和动画效果带来更好的体验。
-
如何利用css的延迟属性结合简单js实现渐变动效通过简单的Scss+TypeScript。我们可以实现视频中常见的渐变动效,这里是通过原生css+JS来实现的
-
如何利用css和简单JavaScript实现文字渐隐动态效果通过css的animation动画及js循环控制实现
暂无评论,抢个沙发...