不定行数 div中文字垂直居中

最新推荐文章于 2022-05-06 21:14:40 发布

Young-BeiJing

最新推荐文章于 2022-05-06 21:14:40 发布

阅读量308

点赞数

分类专栏： js html 文章标签：垂直居中多行文字

本文链接：https://blog.csdn.net/muyi19931220/article/details/100773799

版权

js 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

.nameDivTiPar {

display: table;

height: 2.1rem;

}

.nameDivTi {

width: 5rem;

font-size: 0.32rem;

color: #282828;

word-wrap: break-word;

display: table-cell;

vertical-align: middle;

}

<div class="nameDivTiPar"><div class="nameDivTi">我们是话说得好爱说大话活动时间爱到阿萨德韩可视电话啊</div></div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Young-BeiJing

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

absolute定位实现移动布局

前端向朔

09-22

3018

今天再次拜读了一遍张大神的文章，读到可以用绝对定位实现移动端fiex效果的布局，于是在拜读完之后动手实践了一下。先上图。效果描述：头尾固定，侧边栏固定，中间内容块自适应，自由滑动。html结构<div class="top"></div> <div class="content"></div> <div class="side"></div> <div class="bottom"></di

CSS-1-样式优先级 position 居中 display 弹性布局盒模型省略号坍塌

sharryling

03-26

732

参考链接：https://blog.csdn.net/sinat_36521655/article/details/80140221 不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，...

参与评论您还未登录，请先登录后发表或查看评论

未知行数的文字在div中垂直居中

weixin_30576859的博客

08-16

　　今天工作中遇到一个问题，就是未知行数的文字在div中怎么垂直居中，如下面的3个图：图1 图2 图3 　　图1是2行文字的效果，图2是不经过css垂直居中处理的效果，图3是经过css垂直居中后的效果，html代码如下：（经测试，除了IE7，其他浏览器都成功的垂直居中了） <div class="m"><div class="m1"><div...

CSS 不定行文本的垂直居中

weixin_44850291的博客

03-29

248

解决方案: .name-list-detail{height:42px;border-bottom: 1px solid #E4E4E4;background: #fff;} .name-list-detail p{border-right: 1px solid #E4E4E4;height:100%;line-height: 21px;display: flex;align-items: cen...

纯css实现不固定行数的文本在一个容器内垂直居中

anmi7832的博客

04-21

168

项目中要实现的效果如图： html代码及 css代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ...

固定高度不确定文字行数的垂直居中问题

湛庐无方

12-11

2521

CSS .hhh3{ width:150px; height:38px; display:table-cell; border:1px solid #ccc; vertical-align:middle; font-size:33px;} .hhh3 span{ display:inline-block;*display:inline-block; vertical-align:middle;

固定行数文字垂直居中与不固定行数文字垂直居中

qq_43379179的博客

05-24

402

固定行数文字垂直居中与不固定行数文字垂直居中 今天碰到一个固定固定行数文字垂直居中展示的问题，学到一个新的css属性-webkit-line-clamp。 -webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -...

html网格布局四列三行,前端布局之网格gird布局（简单易懂）

weixin_39959615的博客

06-15

1749

前言弹性布局的文章很多，但是它是解决一维布局的，面对二维就显得无力了，此时我们就需要用到网格布局。(ps：一维就是一列或者一行的布局，当你遇到九宫盒布局，此时涉及到列与行，便是二维布局了，常见于电商网站的商品展示)；看这篇文章，建议你自己建个html，跟着敲一敲，更利于理解。为什么用网格布局？很多同学可能会觉得，我用浮动，定位，弹性盒模型可以实现绝大多数样式布局呀，为什么还要新学一个网格布局呢。就...

HTML + CSS 面试题

sssnanPl的博客

05-06

183

HTML 如何理解HTML语义化？ HTML语义化就是让HTML元素有自己的含义，作用：增加代码可读性，让人更容易读懂。有利于SEO，提高权重。在没有CSS样式时，页面能呈现出更好地内容结构。 script 标签 defer 和 async 的区别 script：会阻碍HTML解析，只有发送请求获取JS代码并执行完脚本才会解析HTML。 script async：解析 HTML 过程中进行JS代码脚本的异步获取，完成之后立马执行，有可能会阻断 HTML 的解析。 script defer：完全不会

html的学习笔记

Cnote

06-08

1055

目录 html5基础介绍制作你的第一个网页 html和css的关系标签的用法 html5文档结构 html文件注释 html5语义化标签段落标签使用<span>标签自定义文字样式使用<hx>标签为网页增加标题使用<div>标签自定义块使用<header>标签定义头部区域使用<footer>标签定义底部区域使用<section>定义区段使用<aside&...

css多行文本垂直居中

09-27

css 多行文本垂直居中显示，兼容各大浏览器！

大小不固定，多行文字的垂直居中

xm1037782843的博客

09-27

6742

单行文字可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码：height:3em; line-height:3em; …… line-height:40px;height:40px; 多行文字如何实现父容器高度固定，文字可能一行，两行或更多行的垂直

textarea文字垂直居中_word小技巧：制作封面时将文字置于页面中心

weixin_39793105的博客

01-16

2422

有时侯我们需要将文字放置于页面的中间(水平居中和垂直居中)，特别是在做封面的时侯，水平居中比较简单，但是发现如果要将一个或多个文字垂直居中处理确没有直接的办法(诸如PS、CDR等专业排版软件要垂直居中非常容易)，word里面要垂直居中可以通过下面的方法：将单行文字置于word页面中心如果只是将一行文字置于页面的中心，有个非常方便的方法：首先：水平居中直接设置该行文字设置居中对齐。接着：让这行文字到...

不定宽高的div中文字垂直居中

zm_miner的博客

03-06

2269

最近公司的项目里面有个要调样式的页面 , 可能是很长很长时间没有写过css样式方面的东西了.吐槽一下我自己,只是一个简单的界面就让我苦恼了很久需求:在不定宽高的div中文字垂直居中 div1的宽高都是百分比 div2的宽高也都是百分比 div3把文字包起来,不设置宽高,由内容撑开 div2 设置 position: relative; div3 设置 text...

多行textarea输入内容，进行水平垂直居中

杨丫丫的专栏

01-17

5485

多行textarea输入内容，进行水平垂直居中

div标签不限字的行数，垂直水平居中

weixin_44052998的博客

04-22

140

text-align: center; display: box; box-pack:center; box-orient:vertical; display: -webkit-box; -webkit-box-pack:center; -webkit-box-orient:vertical;

div内文字垂直居中