[小技巧]CSS---垂直方向的定位

最新推荐文章于 2024-06-03 18:53:48 发布
最新推荐文章于 2024-06-03 18:53:48 发布
阅读量1k 收藏
点赞数
分类专栏： CSS 文章标签： web前端 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cat_starpeople/article/details/50337341
版权

平时一般 都用到 text-align:center来设置水平居中，而且是在父元素里设置属性。

垂直方向用到的是vertical-align可以设置多个值。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

可以对于同一行内的不同高度的文字 或图片设置不同的样式对齐 

常用值：top,bottom,middle,text-top.text-bottom

 例：


Cat_starpeople
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
抖音新号如何精准定位，如何垂直定位，如何追踪定位？
weixin_76578380的博客
01-08 2030
今天给大家分享的是：抖音新号如何精准定位，如何垂直定位，如何追踪定位？ 一、为什么要做定位 定位是个比较宽泛的概念，在商业上，定位之父杰克•特劳特说过：所谓定位，就是令你的企业和产品与众不同，形成核心竞争力；对受众而言，即鲜明地建立品牌。个人认为，抛去复杂的理论，定位简单明了地说起来就是这3点： 1、你是谁？ 2、你要做什么？ 3、你和别人有什么不同？ 而在抖音上的定位，则可以再想得更广和更深一点...
CSS3学习（四）：水平和垂直方向布局
激洪的博客
03-12 1388
CSS3之水平方向布局和垂直方向布局
css元素水平垂直居中
最新发布
博哥的二进制世界
06-03 1206
/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;
CSS的定位方式（5种）
imagine_tion的博客
10-04 1149
1.static:正常文档定位，此时top,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左往右排列 2.relative: 相对定位，此时的“相对”是相对于正常文档流的位置 3.absolute:相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素他的父级和祖父级元素都为relative,他会相对他的父级而产生偏移 4.fixed: 指定元素相对于屏幕视口（viewport）的位置来指定元素的位置。元素的位置在屏幕滚动时不回改变，比如定义
垂直剧中定位3中方法
8月13日
03-08 212
这个问题比较老，方法比较多，各有优劣，着情使用。 一、盒子没有固定的宽和高 方案1、Transforms 变形 这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上 top: 50%; left: 50%; 优点： 内容可变高度 代码量少 缺点： IE8不支持 ...
手撸一套原子类css(类似tailwindcss、unocss、windcss)
weixin_42424283的博客
11-11 4573
用最少的代码手敲一套原子类css，共计约1100个左右的常用样式； 关于增加1100个左右的样式会不会增加项目体积，新项目的大小约8kb,加上1100个样式后为45kb； github仓库地址：wfxt0911/atomicClass: 原子类css (github.com) 如果该示例对你有启发，希望您给个Star
CSS背景图坐标定位详解及负数的使用技巧
12-11
在本文中，我们将深入探讨背景图的坐标定位及其负数使用技巧。 首先，要了解背景图像定位的基本概念。背景图的定位涉及到两个坐标轴：x轴和y轴。x轴代表水平方向，y轴代表垂直方向。当设置一个值时，它默认应用于x...
微信小程序 css使用技巧总结
08-31
当内容超过设定的最大高度时，可以通过`max-height`属性限制元素的高度，并使用`overflow-y: scroll`开启垂直方向的滚动条，确保内容可滚动查看。例如： ```css .container { max-height: 550rpx; overflow-y: ...
postcss-center插件与CSS居中技巧
无论是将文本、图片或者其他内容水平居中，还是垂直居中，或者同时实现水平垂直居中，都是设计师和开发者经常面临的问题。为了解决这个问题，许多开发者都使用了CSS来实现元素的居中。 然而，手动编写CSS来实现元素...
29个常用的CSS小技巧汇总
12-13
【CSS小技巧详解】 在网页设计中，CSS（层叠样式表）是不可或缺的一部分，它负责控制网页元素的样式和布局。以下是一些常见的CSS小技巧，这些技巧可以帮助你更高效地实现各种视觉效果。 1. **清除图片下方空白间隙...
CSS教程之div垂直居中的多种方法
12-13
将`div`的高度设置为与`line-height`相同，文本将会在垂直方向上居中。例如： ```css div { height: 25px; line-height: 25px; overflow: hidden; } ``` 为了确保内容不超出`div`或者产生自动换行，通常我们会...
windicss常用类名规则
cuiyuchen111的博客
03-14 1287
windicss常用类名规则
CSS盒子水平垂直布局以及边距问题
qq_45902025的博客
03-03 315
CSS盒子水平垂直布局以及边距问题
CSS实现水平垂直居中的6种方式
热门推荐
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
CSS垂直居中的12种实现方式
qq_41853417的博客
09-27 1万+
文章目录使用绝对定位和负外边距对块级元素进行垂直居中使用绝对定位和transform另外一种使用绝对定位和负外边距进行垂直居中的方式绝对定位结合margin: auto使用padding实现子元素的垂直居中设置第三方基准使用flex布局第二种使用弹性布局的方式使用 line-height 对单行文本进行垂直居中使用 line-height 和 vertical-align 对图片进行垂直居中使用 display: table; 和 vertical-align: middle; 对容器里的文字进行垂直居中使
CSS实现垂直居中的7种方法
c_x_m的博客
03-04 1万+
CSS实现垂直居中的7种方法1、设定行高(line-height)2、设置伪元素::before3、absolute + transform4. 设置绝对定位5、设置display:flex6、absolute + calc7. display:table-cell实现CSS垂直居中。 1、设定行高(line-height) HTML： <div class="parent"> <span class="child">你好</span> </div>
css控制文本的竖直方向对齐方式
『程序员·小李』的博客
01-01 1282
使用vertical-align可以设置文本的排版 示例 <p>一个<img src="/images/compatible_chrome.gif" alt="w3cschool" width="50" height="50" />默认对齐的图像。</p> <p>一个<img class="text-top" src="/images/compatible_chrome.gif" alt="w3cschool" width="50" height.
CSS之文字水平方向与垂直方向的属性writing-mode
weixin_43343144的博客
04-11 926
/* Keyword values */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /* Global values */ writing-mode: inherit; writing-mode: initial; writing-mode: unset;
CSS第三章：4.垂直方向的布局；overflow属性
要思考，要努力
04-28 482
总览1.overflow属性，一共有4个参数，分别为：· visible默认值，子元素会从父元素中溢出，在父元素之外的地方显示· hidden：溢出的内容将会被裁剪，不会显示· scroll：生成两个滚动条 · auto：根据需要生成滚动条 一、overflow · visible 1.设置一个框和滚动条，可以上下左右滚动 2.HTML代码： 3.CSS代码： 4.实际效果： 二、overflow · scroll 1.不设置任何限制，超出父元素的内容可以溢出 2.HTML代码： 3
CSS布局技巧：三行布局，上下固定，中间自适应高度
3. **垂直居中对齐**：通过将中间栏的子元素(`#wrap`)设置为`display:table-cell`，并应用`vertical-align:middle`，内容可以在垂直方向上居中显示。 4. **浏览器兼容性处理**：由于IE6和7不支持`display:table`等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值