在浏览网页时，经常看到一些段落他是垂直对齐的，今天这篇文章就和大家讲讲如何用css设置段落的垂直对齐，有需要的朋友可以参考一下，希望对你有所帮助。
CSS中通过属性vertical-align来设置段落的垂直对齐方式。
注意，对于文字本身而言，该属性对于块级元素并不起作用，例如
和
垂直对齐 @@##@@ 垂直对齐方式，top @@##@@ 垂直对齐方式，bottom @@##@@ 垂直对齐方式，middle 如上代码，建立了一个3行2列的表格，其中左侧一列均为图片，起到了将单元格的高度加大的作用，同时也作为对比。
右侧的一列为文字，分别采用了顶端对齐、底端对齐和中间对齐的方式，对应的CSS的值分别为top、bottom和middle。
立即学习“前端免费学习笔记（深入）”；
如果，对vertical-align属性设置了具体的数值，对于文字本身，则可以在垂直方向上发生位移。
垂直对齐 给对齐属性设置具体数值，正数
给对齐属性设置具体数值，负数
如上代码，当属性值为正数时，文字将向上移动相应的数值，设置为负数时则向下移动。
此外，vertical属性还有很多其他值，不过主要是适用于图片。
![如何用CSS设置段落的垂直对齐（附代码）]()
![如何用CSS设置段落的垂直对齐（附代码）]()
![如何用CSS设置段落的垂直对齐（附代码）]()
![如何用CSS设置段落的垂直对齐（附代码）]()
以上就是如何用CSS设置段落的垂直对齐（附代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612107.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
关于作者
如何使用css3实现图片的自动轮播特效（附完整代码）
上一篇
2025年12月24日 02:45:38
怎么用CSS设置动态超链接（附代码）
下一篇
2025年12月24日 02:46:06
相关推荐
-
怎么用CSS设置动态超链接（附代码）
这篇文章主要给大家介绍css设置动态超链接的方法，有代码有文字说明，比较容易理解，感兴趣的朋友可以参考一下，希望对你有所帮助。 HTML中，超链接是通过标记实现的，具体的地址使用标记的href属性。 ali的博客 默认的情况下，浏览中的超链接统一为蓝色并且有下划线，点击过后的超链接则为紫色，而且也有…
-
图文详解如何让ul中的li元素横向排列（附代码）
在页面布局时，我们经常会用到li标签，因为li标签用途很广泛，它可以用来制作列表，选项卡，导航等等。但是 标签里的li默认情况下是纵向排列的，那我们可不可以让li横向排列呢？这篇文章就给大家介绍两种方法，来实现html中ul列表横向排列。有需要的朋友可以参考一下，希望对你有用。 ul列表的横向排列在…
-
图文详解如何让ul中的li水平垂直居中
ul li标签在页面中用得很多，今天这篇文章就和大家分享一个li标签中的小技巧，如何让ul中li水平垂直居中，感兴趣的朋友可以参考一下，希望对你有用。 我们在写轮播图时，底部的小圆点或数字会放在一个ul下li里，这时候一般都要求小圆点或数字垂直居中，今天就写一个简单的li在ul中水平垂直居中。 轮…
-
实现元素水平排列的六种方法
众所周知，块级元素默认是垂直排列的，行内元素是水平排列的，而在布局时基本上都是用块级元素，如div等常用块级标签，那么如何让块级元素也进行水平排列呢？这篇文章给大家介绍六中方式，实现块级元素的水平排列。 第一种：display：inline-block 首先得先了解块级元素（block elemen…
-
css如何利用transparent属性设置透明度？transparent属性绘制各种三角形（代码实例）
想到用css设置元素透明度，大家的第一反应会是：用opacity属性来设置透明度，其实在css中还有其他设置透明度的方法。本章给大家介绍用transparent属性设置透明度，以及用transparent属性绘制各种三角形。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 那么，大家…
-
图文详解图片水平垂直居中的五种方法（附代码）
在页面布局时经常需要对图片的位置进行处理，这篇文章围绕图片居中展开，主要讲了如何用css实现图片的水平居中，图片垂直居中，还有图片的水平垂直居中，课程比较实用，感兴趣的小伙伴，可以参考一下，希望对你有所帮助。 1、text-align: center实现图片水平居中 text-align一般用于文本…
-
如何使用CSS的Grid布局实现小狗邮票（附源码）
本篇文章给大家带来的内容是关于如何使用css的grid布局实现小狗邮票（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…
-
如何使用CSS的Grid布局实现小鸡邮票（附代码）
本篇文章给大家带来的内容是关于如何使用css的grid布局实现小鸡邮票（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…
-
如何使用CSS的Grid布局实现小松鼠邮票的效果（附源码）
本篇文章给大家带来的内容是关于如何使用css的grid布局实现小松鼠邮票的效果（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 效果预览 源代码下载 每日前端实战系列的全部源代码请从 github 下载： https://github.com/comehope/front-…
-
如何让伪进度条在页面上显示成gif图像
在工作中为了方便，我们需要加上一些效果，这篇文章就和大家讲讲伪进度条如何在页面上显示gif图像，感兴趣的朋友可以参考一下，希望可以帮助到你。 最近做的一个项目中，点击某个操作后，由于后台做的事情比较多，花的时间比较久一点。而这个过程中前台又看不出一点变化，为了防止客户点击后再次点击该按钮，就在第一次…
-
图文详解CSS3中filter滤镜属性的使用（实例代码）
最近在网上偶然发现了一个特别牛逼的属性，就是css3中的filter滤镜属性，这个属性可以改变图片的颜色，一张图片可以呈现多种效果，接下来就给大家介绍css3中的filter过滤器的使用方法，以及实例示范filter滤镜的效果，感兴趣的朋友继续往下看吧。 很多人不知道CSS filter是什么意思。…
-
深入理解CSS中的filter属性的使用方法
这篇文章只要讲了css滤镜的使用方法，非常详细，有需要的小伙伴可以参考一下，希望对你有用。 CSS滤镜的使用方法：filter:filtername(parameters) 即 filter:滤镜名称（参数） alpha：设置透明层次blur：创建高速度移动效果，即模糊效果chroma：制作专用颜色…
-
分享九种纯CSS实现垂直居中的方法
这篇文章围绕垂直居中展开，主要介绍了垂直居中的多种方法，相信总有一款是你需要的，感兴趣的朋友可以参考一下，希望对你有帮助。 垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加…
-
你知道怎么让一个float:left的元素居中吗？
在页面布局中，经常用到浮动，那浮动以后的元素还可以居中吗？这篇文章主要讲了如何让一个float:left的元素居中，不知道的小伙伴继续往下看吧。听起来很高端大气上档次的样子 但是其实试了一下还是很简单 第一种方法 .box { float: left; width: 100px; height: 1…
-
当float属性导致换行后，应该怎么处理？
页面布局离不开float浮动的使用，当float属性导致换行后，应该怎么处理？想知道的小伙伴继续往下看吧，希望可以帮助到你。 在h5开发中，经常会使用float属性来解决一些布局问题。但在某些复杂的布局中也会遇到使用float属性是导致一行中的元素无法对齐或者float元素换行等现象。在遇到这种问题…
-
如何让ul实现横向排列不换行的效果
大家在页面布局时有没有遇到这种情况，让ul横向排列时，它会换行，但是这不是我们希望看到的效果，你知道怎么处理这种情况吗？这篇文章就和大家聊聊如何让ul实现横向排列不换行，感兴趣的欢迎阅读评论。 刚学前端不久，尝试着写各种布局。今天想实现一个横向排列的照片列表，于是最先想到的就是利用ul将list-s…
-
css中如何设置hr的样式？css 标签多种样式（图文）
在对html网页进行美化的时候，肯定少不了要用的hr标签进行修饰页面，但默认的hr标签样式对页面的修饰起不到什么好的作用，有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作。那么如何在css中给hr标签设置样式呢？本章就给大家介绍css设置hr标签的几种样式。有一定的参考价值，有…
-
css如何使用利用border和border-radius绘制一些小图形（代码实例）
在页面开发中，常常需要一些小图形来美化页面。这些图形可以用图片形式展现，但页面每次加载图片需要花费时间，那么用css如何实现这些图形？本章就给大家介绍css如何使用利用border和border-radius绘制一些小图形（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。…
-
分享三种给li标签添加图标的方法
我们在页面布局时，经常会用到li标签，单独使用li标签比较单调，有时候为了页面效果，需要加入图片，那怎么在li标签中添加图片呢？这篇文章就和大家分享三种给li标签添加图标的方法，希望对你有用。 1.使用CSS的特殊属性 ul{list-style-type:disc;} //disc的作用是在每个l…
-
使用css3在网页中实现各种三角形样式集合（原理解析）
大家在浏览web网页的时候经常看到有各种各样的图形，比如圆形，正方形，长方形，三角形等，今天特意做了一个关于用css实现三角形的教程，那css三角形怎么写呢？css实现三角形的原理是什么？ 推荐手册：css在线手册 请看一下实例详解。 （相关视频教程推荐：CSS教程） css3三角形使用场景 我们知…
微信扫一扫 
支付宝扫一扫 
