换行，vertical-align

最新推荐文章于 2024-09-14 08:09:14 发布
最新推荐文章于 2024-09-14 08:09:14 发布
阅读量166 收藏
点赞数
分类专栏： HTML+CSS 文章标签： css html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/REDJOLER/article/details/107347520
版权

1.换行

<div>asdddddddddddddddddddddddddddddddddddddd</div>    视为一个单词，不会换行，asdddddd asd asd会换行

2.vertical-align

父元素设置需要line-height，如果父元素为inline，则可以不用

当父元素没有设置line-height时，只对行内元素的兄弟元素对齐有用，无法子元素居中对齐父元素

子元素为inline或inline-block，子元素如果继承了父元素的line-height，则vertical-align就不起作用

更多vertical-align，可以访问：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/comment-page-1/#comments

林六汶
关注
专栏目录
CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题
流楚丶格念的博客
07-03 4762
CSS高级技巧 CSS用户界面样式 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白(就是普通是鼠标指针) | pointer 小手 | move 移动 | text 文本 鼠标放我身上查看效果哦： <ul> <li styl
009day（vertical-align属性，White-space属性，Overflow属性，Text-overflow属性）
w296932099的博客
07-22 260
一、vertical-align属性 文字与图片的位置 1、垂直对齐：在垂直方向设置元素的位置 2、应用场景：log垂直居中、下拉菜单垂直居中、控制文本与图片的位置 3、语法：verticla-align（必须转化为行内块） 4、文字与图片的位置 只有元素类型是行内或者行内块元素才支持vertical-align属性 vertical-align：baseline；默认值 baseline基线 vertical-align：middle；垂直在line-height范围居中对齐（就是图片外..
vertical-align:middle居中，Firefox中换行问题
XGe91的博客
02-24 431
vertical-align:middle居中，Firefox中换行问题 对vertical-align：middle的一些理解 之前就对vertical-aign的用法一知半解，特别是遇到一些居中对齐的问题是经常用margin,padding等解决，最近在项目中常用到垂直居中，所以有必要回过头来总结。 vertical-aign主要用在文本和与文本相邻元素的垂直方向上的对齐问题，而且是内联
CSS文本换行
热门推荐
懒羊羊我小弟的博客
08-11 1万+
CSS文本换行处理 一、文本基本属性 white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit; 规定段落中的文本如何换行 normal：默认。空白会被浏览器忽略。 pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre>标签。 nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br>标签为止。 Pre-wrap:：保留空白符序列，但是正常地进行换行。 Pre-l
css 设置标签随文字换行移动——vertical-align
青蛙king的博客
03-01 1937
css 标签随文字换行，并紧随其后。当不足以展示标签时，标签自动换行。 代码实现如下： <div class='box'> <p class='desc'> qwertqwert <span class='lable'>1234567</span> </p> </div> .box { width: 300px; background: aliceblue; padding: 15px; } .d
使用writing-mode让文字竖向排版
clschen的专栏
04-22 3567
通常我们网页上的文字在缺省状况下是从左到右横向排版的，但有些情况下，为了排版效果，或为了更好的利用页面空间，我们需要将文字竖向排版。以前有一种很土的方法，就是让文字的容器只有一个文字的宽度，挤的文字竖向排列。在table表头里通常会有这种效果。 writing-mode是CSS3里新引入的可以让文字竖向排版的属性。它不仅可以让文字竖向，还可以让文字从右往左排。这个CSS3属性还处在实验阶段，
vertical-align 垂直对齐
HXL521666的博客
10-16 1200
有宽度的块级元素居中对齐，是margin: 0 auto; 让文字居中对齐，是text-align: center; vertical-align 垂直对齐，它只针对于「行内元素」或者「行内块元素」 设置或检索对象内容的垂直对其方式。 vertical-align:baseline|top|middle|bottom 注意： vertical-align 不影响块级元素中的内容对齐，它只针对于「行内元素」或者「行内块元素」， 特别是行内块元素， 通常用来控制...
vertical-align 垂直对齐 与 溢出的文字 省略号显示 css精灵技术（sprite）重点
chenyiboke的博客
11-08 493
1.vertical-align 垂直对齐 1. 有宽度的块级元素居中对齐，时margin：0 auto 2. 让文字居中对齐，是text-align：center； 但是我们从来没有讲过有垂直居中的属性 vertical-align垂直对齐，他只针对于行内元素或行内块元素， vertical-align ：baseline |top |middle |bott...
CSS_黑马基础高级技巧
qq_42636335的博客
11-06 459
#CSS用户界面样式 界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。 鼠标样式cursor 选择器{cursor: pointer;} 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 轮廓outline 是绘制于元素周围的一条线，位于边框边缘的外围（和边框不冲突），可起到突出元素的作用 选择器{online：none；}或者outline: 0; 一般情况下都是去掉的 防止拖拽文本域resize 实际开发中，我们文本域（text...
LaTeX技巧207：使用align环境输入多行公式的技巧
weixin_34146986的博客
06-14 1845
align是输入多行公式中最好用的环境，仅仅是个人浅见，因为他的对齐非常灵活，如果大家需要非常灵巧的对齐方式的多行公式，建议使用align环境，对应的也还有align*和aligned等等类似的环境，这里不再详述。下文提供代码，尽展其风姿绰约。演示效果图： 演示代码：\documentclass{article}\pagestyle{empty}\setcounter{page}{6}\setle...
关于css中的align-content属性详解
weixin_30496751的博客
05-25 670
align-content 作用: 会设置自由盒内部各个项目在垂直方向排列方式。 条件:必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。 设置对象: 这个属性是对她容器内部的项目起作用，对父元素进行设置。 取值:stretch:默认设置，会拉伸容...
html 文字竖着排引号,文字竖排演示
weixin_39820136的博客
06-04 3937
文字竖排演示这是一个演示网页，用于呈现古文样式的文字竖排效果，但是它的浏览器兼容性并不完美。古文中不使用标点，也没有英文字母和阿拉伯数字，这些都是现在竖排文本需要考虑到的。在本页的文字竖排演示中，半角数字和字母将被顺时针旋转９０度，至于标点下面将会介绍。竖排文稿与横排文稿使用标点符号的不同１、句号、问号、叹号、逗号、顿号、分号和冒号放在字下偏右。２、破折号、省略号、连接号和间隔号放在字下居中。３、...
HTML、CSS实现树状图
p_s_p的博客
09-09 621
【代码】HTML、CSS实现树状图。
项目中使用简单的立体3D柱状图，不用引入外部组件纯css也能实现
qq_35452726的博客
09-13 391
在一些项目需求中，可能会遇到下面这种场景，3d柱状图来展示百分比，但是又不想引入外部组件，下面就用纯css给大家封装了一个组件。在需要使用的地方直接引入使用就好了，只传百分比，宽高有需要再传。
使用HTML和CSS制作网页的全面指南
最新发布
weidl001的博客
09-14 1141
HTML（超文本标记语言）是构建网页的基础语言。它用于定义网页的结构和内容。通过使用不同的标签（tags），我们可以告诉浏览器如何显示文本、图像、链接等。CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。通过以上步骤，我们已经了解了如何使用HTML和CSS创建一个简单但完整的网页。主题要点HTML基础了解HTML的结构和常用标签CSS基础理解CSS的语法、选择器和常用属性网页制作步骤规划布局 -> 编写HTML -> 添加CSS实践技巧。
css 实现一个卡片
qq_41304029的博客
09-12 455
【代码】css 实现一个卡片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布功能</title> <style> *{margin:0; padding:0 } #weibo{ width: 600px; padding:10px; border: 1px solid #000; margin:100px auto 0; } #weibo textarea{ width: 455px; height: 165px; resize:none; vertical-align: bottom; } #weibo button{ width: 40px; height: 24px; vertical-align: bottom; } #weibo ul{ margin:20px 20px 20px 90px; } #weibo li{ line-height: 24px; list-style-type:none; border-bottom:1px dashed #ccc; word-break:break-all; /*自动换行*/ } </style> </head> <body> <div id="weibo"> 微博内容： <textarea></textarea> <button>发布</button> <ul> <li></li> </ul> </div> <script src="../jquery-3.7.0.js"></script> <script> $('button').click(function(){ // 1.拿到输入的内容 var res=$('textarea').val(); if(res!=''){ // console.log(res); // 2.创建孤儿元素 var oLi=$('<li>'+res+'</li>'); //3.添加元素 $('ul').prepend(oLi); //4.清空文本域 $('textarea').val(''); }else{ alert('请输入内容'); } }); </script> </body> </html>改进之后的代码
06-10
vertical-align: bottom; } #weibo button { width: 40px; height: 24px; vertical-align: bottom; } #weibo ul { margin: 20px 20px 20px 90px; } #weibo li { line-height: 24px; list-style-type...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值