首页 > 其他分享 >css小技巧

css小技巧

时间:2023-06-16 21:11:48浏览次数:44  
标签:40px 居中 技巧 height 垂直 css

  1. 文字水平垂直居中
文字行高 = 盒子高
<body>
    <div>文字垂直居中</div>
</body>
div {
    height: 40px;
    width: 250px;
    font-size: 16px;
    background-color: aqua;
    line-height: 40px;
    text-align: center;
}

效果:
image

标签:40px,居中,技巧,height,垂直,css
From: https://www.cnblogs.com/zyyq02171220/p/17486491.html

相关文章

  • 60秒学会这个技巧,报价效率提高不止一倍~
    三千个配电箱按甲方清单重新排下顺序,你需要多长时间?即使熟练操作的报价人员,也需要一天吧!?NO!这个速度单子注定要飞了三分钟三分钟三分钟就可以搞定!竟有如此奈斯的功能?赶快来get这个技能吧:1、点击箱柜下的“箱柜调序”按钮,重排方式可选择“按字段”或“按甲方清单” 2......
  • 处理“行末不能有多余空格”的小技巧
    处理“行末不能有多余空格”的小技巧某些题目或者某些oj(比如PTA)会在你输出一个数组时有以下要求:两个数字之间以空格分隔行末不能有多余空格我们有如下技巧:注意,以下输出示例使用的是c++语言,其他语言可以根据思路自己类比实现for(inti=1;i<=n;++i){ cout<<a[i]......
  • C#/VB.NET:快速而简单的免费SVG到PDF转换技巧
    在日常工作中,我们常常需要将SVG转换为PDF格式。这是因为SVG格式的图像在打印时可能会出现问题,例如失去分辨率或无法正确适应纸张大小。与此相比,PDF格式则专门用于打印和共享文档,可以确保高质量输出,并且能够自动适应不同的纸张大小。在本文中,我们将介绍如何使用编程方式将SVG文件转......
  • 7个必备JavaScript优化技巧,CodeGeeX 5秒搞定了!
    JavaScript,目前成了使用最广泛的编程语言。这篇文章给出的是一些JavaScript的优化技巧,这些技巧帮助开发者编写出更好的代码。当写完这些代码段之后,我突然意识到,所有的这些代码段,由于它们的常用性,非常适合用AI辅助编程工具CodeGeeX来自动生成。下载使用——CodeGeeX插件,在VSCode......
  • css常用选择器
    1.常用子元素选择器-选择特定子元素:nth-of-type(n)选择其父级下的第n个元素例如:p:nth-child(2):last-of-type选择其父级下的最后一个元素:nth-child(n)选择其父级下的第n个子元素:nth-last-child(n)选择其父级下的第n个子元素,从最后一个子项计数:nth-last-of-ty......
  • CSS 如何根据背景色自动切换黑白文字?
    在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:一、CSS滤镜实现使用滤镜对文字单独处理,所以需要额外一层标签。然后容器和文字用同一种颜色表示,目的是......
  • PS - 小技巧
      皮肤变白纯色背景抠图    皮肤变白图像>>应用图像>>通道:绿>>混合:滤色>>不透明度:50% 纯色背景抠图#选择选区,适用于背景为纯色的图片选择>>主体#可以将背景抠掉选择>>选择并遮住>>输出设置:净化颜色>>确定#将图片保存为PNG,可以实现......
  • 浅析CSS实现超过3行折叠并显示...查看详情
    要实现效果如下:尾部带查看详情,前面有三个点省略号。之前单独看这个布局,即使借助JavaScript也不是一件容易的事啊(需要计算文字宽度动态截取文本,然后append上三个点和查看详情。vue-clamp就是这么做的,包括很多博客也是这么讲的,但是讲真,如果是个列表,这种不断的判断,肯定不是......
  • tailwindcss基本使用
    目录一、tailwindcss基本使用1、设置tailwind和postcss一、tailwindcss基本使用1、设置tailwind和postcss命令*npminit-y*npmitailwindcsspostcss-cliautoprefixer*npxtailwindinit编辑tailwind.config.jsmodule.exports={content:["./public/**/*.......
  • 2023-06-15 css伪类before、after制作文字两边横线
    <divclass="box">测试</div>···.box{color:#ccc;text-align:center;position:relative;&::after{position:absolute;left:24rpx;top:52%;content:'';width:calc(50%......